CSS layout differs!?!

HTML & CSS
1

Hi

You’ll excuse me for not boring you with acres of my code ( I will post if needed)

I have put a web page together positioned with CSS and <div> elements, and althougbh new to it, i am really enjoying workign with it!

However, when i Copy and Paste my template to create a new page, something bizarre happens. elements about half way through my page re position themselves about 15pts higher. Even though it is a direct copy and paste from the first page!!!

Is this a normal behaviour or have I over looked something that others have experienced before. There is literally no change in code, and it uses the same css file!!

Ideas on a postcard please :wink:

Dibs

2

Hi,

It could be a number of things :slight_smile:

Is the doctype the same on each page?

Is it different in all browsers or just one?

Are there other styles being linked to on other pages?

We can only solve it for you by seeing the code for the original and the code for the new page.

It’s bound to be something simple as pages using the same code and same html will be identical from before. :slight_smile:

3

It is the exact same code (literally lifted it with select all, copy, paste), same browser, same doc type. The only difference i can see in the code is a slight alteration to the path the image files are held in.

I’ll sanitise up some code and post i think.

Ty for the response so far!

4

It’s the same code… but different content? Now, see, that’s a thing to mention :slight_smile:

You can always try a different way: make a copy of the file instead.

5

original code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>****</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="***** is based in ****** offerings a variety of surveys/valuation products including EPC's">
<link rel="stylesheet" type="text/css" href="/tdp.css">
</head>

<body class='background'>
	
<div class="body">
  <div class="logo"><img src="images/********logo.jpg" width="150" height="228" /></div>
	
  <div class="navbar"> 
    <ul>
      <li id="titlelist"><a href="http://www.********.co.uk">Home</a></li>
      <li id="titlelist"><a href="http://www.*********.co.uk/surveytype/surveytype.html.php">Services</a></li>
      <li id="titlelist"><a href="#">Defect Gallery</a></li>
      <li id="titlelist"><a href="#">News</a></li>
      <li id="titlelistlast"><a href="#">Contact us</a></li>
    </ul>
  </div>
  <div class="survey"> <img src="images/Random-Graphic.jpg" width="500" height="100" alt="example surveys offered by" /></div>
  <div class="sidemenu"> 
    <p class="sidetext">Call us for a FREE no obligation quote!</p>
  </div>

	
  <div class="content"> </p> </div>
  
  <div class="rics"> <img src="images/RICS_logo_online_Grey__RICS_under_lionshead.JPG" width="50" height="62" alt="Royal Institution of Chartered Surveyor Logo"/></div>
  <div class="bre"> <img src="images/BRE.jpg" width="50" height="50" alt="BRE - Our EPC Accreditation scheme"/></div>
  
  <div id="crumb-trail"> 
    <ul >
      <li style="display:inline">You are here:</li>
      <li style="display:inline">Home</li>
    </ul>
  </div>
  
  <div class="footer"> 
    <p class="footertext"></p>
    <p class="footertext"></p>
  </div>
  
  <div class="login"><a href="../landp/site/Client_jobs/index.php">Login</a></div>
  <div class="footermap"> 
    <ul id="footmap" style="padding-left: 40pt;">
      <li id="footertitle">Survey Services</li>
        </ul>
    <ul id="footmap" style="padding-left:85px">
      <li id="footertitle">Defects</li>
       </ul>
    <ul id="footmap" style="padding-left:85px">
      <li id="footertitle">News</li>
         </ul>
    <ul id="footmap" style="padding-left:85px">
      <li id="footertitle">Useful links</li>
      </ul>
  </div>
</div>
</body>
</html>

and the second page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>*****- Surveying & Valuations experts in *****</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="***is based in ******offerings a variety of surveys/valuation products including EPC's">
<link rel="stylesheet" type="text/css" href="/tdp.css">
</head>

<body class='background'>
	
<div class="body">
  <div class="logo"><img src="../images/******logo.jpg" width="150" height="228" /></div>
	
  <div class="navbar"> 
    <ul>
      <li id="titlelist"><a href="http://www.*******.co.uk">Home</a></li>
      <li id="titlelist"><a href="http://www.*****.co.uk/surveytype/surveytype.html.php">Services</a></li>
      <li id="titlelist"><a href="#">Defect Gallery</a></li>
      <li id="titlelist"><a href="#">News</a></li>
      <li id="titlelistlast"><a href="#">Contact us</a></li>
    </ul>
  </div>
  <div class="survey"> <img src="../images/Random-Graphic.jpg" width="500" height="100" alt="example surveys offered by " /></div>
  <div class="sidemenu"> 
    <ul style="list-style-type:none;padding-left:2px;top:2px">
      <li class="sidelist" style="align:center"><a href="#">Valuation</a></li>
      <li class="sidelist"><a href="#">RICS Homebuyers</a></li>
      <li class="sidelist"><a href="#">Building Survey</a></li>
      <li class="sidelist"><a href="#">EPC</a></li>
      <li class="sidelistlast"><a href="#">Commercial</a></li>
    </ul>
  </div>

	
  <div class="content"> </div>
  
  <div class="rics"> <img src="../images/RICS_logo_online_Grey__RICS_under_lionshead.JPG" width="50" height="62" alt="Royal Institution of Chartered Surveyor Logo"/></div>
  <div class="bre"> <img src="../images/BRE.jpg" width="50" height="50" alt="BRE - Our EPC Accreditation scheme"/></div>
  
  <div id="crumb-trail"> 
    <ul >
      <li style="display:inline">You are here:</li>
      <li style="display:inline">Home</li>
    </ul>
  </div>
  
  <div class="footer"> 
    <p class="footertext"></p>
    <p class="footertext"></p>
  </div>
  
  <div class="login"><a href="../landp/site/Client_jobs/index.php">Login</a></div>
  <div class="footermap"> 
    <ul id="footmap" style="padding-left: 40pt;">
      <li id="footertitle">Survey Services</li>
      <li id="footer">Valuation</li>
          <li id="footer">Commercial</li>
    </ul>
    <ul id="footmap" style="padding-left:85px">
      <li id="footertitle">Defects</li>
      <li id="footer">Structural</li>
      <li id="footer">External</li>
      <li id="footer">Internal</li>
      <li id="footer">Services</li>
    </ul>
    <ul id="footmap" style="padding-left:85px">
      <li id="footertitle">News</li>
      <li id="footer">Issue 1</li>
      <li id="footer">Issue 2</li>
    </ul>
    <ul id="footmap" style="padding-left:85px">
      <li id="footertitle">Useful links</li>
      
    </ul>
  </div>
</div>
</body>
</html>
6

… and the problem starts where?

I mean beside the fact that you’re using xhtml DTD but w/o the self closing tag, you using ids as classes.

… and you have a lost </p> in the first one:

<div class="content"> </p> </div>

Use the validator first. And another DTD, it seems xhtml, neverming strict, is a bit over your head right now. And don’t work with inline style.

7

You are probably right about the XHTML etc.

and the </p> tag is just poor redacting by me for posting here without divulging anything too much.

The problem i have is that in the second code from the <div content> onwards it lifted up about 15 pts from the first code, even though they are exact duplicates.

Please dont pull and rip me apart on items i am not referring to, as i am still learning, and taking one problem at a time!

Ty

8

Interesting comment.

Is it referring to the list ? (it is a <p> in the first page)

Is this the discrepency possibly?

9

No one can hep you like this, sorry. You need to provide a test case.

10

thanks for trying anyways!

11

What content does it push up? The navigation or sidemenu or what?
If its a element near the top, It might be getting pushed by a div block below it. Try using a clear: both; for the element that is getting pushed up. however, if there is an element above the affected, and the element on top has a bottom margin and the element on bottom has a top margin, then it will collapse those margins.

12

If you have some different elements in places such as a p element in one page and a list in another then there will be differences due to the default margin/padding of those elements.

If you have entered text that is not inside a p element then it will have no margin but once inside a p element it will have a top and margin in all browsers except for ie7 and under which only have a bottom margin.

List on the othe rhand may have a different top and bottom margin to p elements and some browsers use a default left margin for the bullet and some use a default left padding. If you have not controlled all these then there will be more differences.

It’s very hard to give an accurate answer so far based on what we’ve seen so the above is my best guess:)

The parts of those pages that are the same are displaying the same.

13

Thanks Paul, I think you have probably hit the nail on the head, the only difference now i think of it is the list! I’ll isolate it and give it a go!

14

A result! thank you.

I need to adjust the layout still, but i at least know where the problem lies (which is half the battle sometimes isnt it?)