Cross browser consistency - nested Div's

PaulStat

PaulStat

PaulStat

Soldato
Joined
1 Mar 2003
Posts
5,508
Location
Cotham, Bristol
Hi folks,

I'm slowly but surely getting the layout sorted of my website with CSS + HTML. Now the layout looks great in Firefox 3.6 but IE 7 doesn't like it at all!

Anyway let me describe the scenario to you.

I have my CSS like so

Code: 
body {
   font-family: Arial, sans-serif;
   font-size: 14px;
   color: #333333;
   background-color: #CCCCCC;
   text-align: center;
}
/*************************DIV ID's****************************/
#whiteBox {
   margin: 0 auto;
   margin-top: 85px;
   width: 946px;
   height: 666px;   
   background-color: #FFFFFF;
   text-align: left;
   font-weight: normal;
}
#logoBox {
   position: relative;
   width: 641px;
   height: 55px;   
   top: 33px;
   left: 277px;
   text-align: right;
}
#navBox {
   position: relative;
   width: 641px;
   height: 50px;   
   top: 28px;
   left: 277px;
   text-align: right;
}
#leftBody {
   position: relative;   
   width: 241px;
   height: 425px;
   top: 55px;
   left: 22px;
   text-align: left;
}
#rightBody {
   position: relative;   
   width: 641px;
   height: 425px;   
   top: -366px;
   left: 277px;
   text-align: left;   
}
#greenBox {	
   margin: 0 auto;
   /*margin-top: 751px;*/
   width: 946px;
   height: 28px;   
   text-align: right;
   background-color: #336666;
   font-weight: normal;
}
#creditBox {
	 position: relative;
   width: 641px;
   height: 20px;   
   top: 8px;
   left:277px;
   text-align: right;   
   font-weight: normal;
}
#socLogoBox {
   position: relative;
   width: 90px;
   height: 20px;
   top: -15px;
   left: 22px;
   text-align: left;
   font-weight: normal;
}

And I've laid out the HTML so that the DIV's a nested within the main white and green boxes like so

Code: 
<html>

<head>

<title>Test layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="./css/siteStyle.css" rel="stylesheet" type="text/css">

</head>

<body> 
	<div id="whiteBox">	
		<div id="logoBox">		
			<font class="logoA">paulstatham</font><font class="logoB">photography</font>
			<hr>
		</div>
		<div id="navBox">
			<p class="navA">HOME   |   PORTFOLIO   |   NEWS   |   PRICING INFORMATION   |   SHOPPING CART   |   CONTACT</p>
		</div>
		<div id="leftBody">
			<font class="secHead1">WELCOME</font>
			<p class="secText">Bla bla bla</p>
		</div>
		<div id="rightBody">
			Right Body!
		</div>
	</div>
	<div id="greenBox">
		<div id="creditBox">
			<font class="credits">(c) 2010 Paul Statham - Privacy Statement - Legal Disclaimer</font>
		</div>
		<div id ="socLogoBox">
			<img src="./images/fbLogo.png">   <img src="./images/twLogo.png">
		</div>
	</div>
</body>
</html>

Now as I said it looks great in firefox

firefoxu.jpg


But not so much in IE

40878712.jpg


Can anyone offer some advice?
 
If it was me, i'd put both the white box and the green box in a container div, set that to your width and center it. Should work fine then.
 
Edward01 said:
If it was me, i'd put both the white box and the green box in a container div, set that to your width and center it. Should work fine then.
Click to expand...

Not 100% sure what you mean?

I changed the CSS to this

Code: 
#container {
	margin: 0 auto;
	margin-top: 85px;
	width: 946px;
}
#whiteBox {
   /*margin: 0 auto;*/
   /*margin-top: 85px;*/
   width: 946px;
   /*height: 666px;   */
   background-color: #FFFFFF;
   text-align: left;
   font-weight: normal;
}
#greenBox {	
   /*margin: 0 auto;*/
   /*margin-top: 751px;*/
   width: 946px;
   /*height: 28px;   */
   text-align: right;
   background-color: #336666;
   font-weight: normal;
}

And the HTML something like

Code: 
<div id="container">
   <div id="whiteBox">
      <!-- other divs -->
   </div>
   <div id="greenBox">
      <!-- other divs -->
   </div>
</div>

Now the result in IE looks the same but the height of the firefox white box and green box has grown?
 
Last edited:
If you've commented out the heights then they are inheriting their height from the items within.
 
Sorry guys bit of an update on this, I forgot to add the following line to the top of the HTML. It now looks a lot better

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

I do still have one issue however in IE, the DIVS in the greenbox seem to be in the wrong place

77373253.jpg
 
Right sorted the last issue as well now. The problem was I had set the green box to be right aligned, so even though I had specified the images box and the credits box to have different alignments to their parent it was still picking up the right alignment.

So if I set the green box to have a left alignment it works! :)
 
For future reference mate, not only does it make things considerably easier for all involved, but you're also far more likely to get quick help if you just chuck the page online and post a link. Both problems you had probably would have been spotted within seconds by the first person to inspect your page.
 
You must log in or register to reply here.
Back
Top Bottom