Netscape CSS mess

[4midori]

Hi,

I'm coding my new site, which of course works fine in IE, but Netscape 7 hoses it.

Below are the relevant styles. I put a border on every div so the problem is easier to troubleshoot. The issue is that divs are overlapping and the #footer div is not sitting at the bottom of #frame.

Please see accessglobe.com/newSite
Look at it in IE 6, then in Netscape 7 to see what the problem is. The style sheet is at accessglobe.com/newSite/accessglobe_style.css

Thanks!

body {	
	text-align:center;
	margin:0px;
	background-color:#F3F1F1;
		}	
		
/*main DIVS */
	
#frame {
	width:700px;
	height:auto;
	margin-right:auto;
	margin-left:auto;
	margin-top:20px;
	padding:0px;
	text-align:left;
	border:1px solid black;
	background-color:#D6D3DE;
	}

#flag	{
	background-color:black;
	width:700px;
	height:109px; 
	}
	
	
#nav { 
	background-color:black;
	width:700px;
	height:19px;
	border-top:1px solid #CC0000;
	border-bottom:1px solid #CC0000;
		}
	
#main {
	width:700px;
	margin-top:15px;
	float:left;
	border:1px solid red;
	height:inherit;
	}
	
#content {
	width:666px;
	padding:0px 0px 0px 34px;
	float:left;
	border: 1px solid green;
	}

#bodyText {
	width:445px;
	float:left;
	border:1px solid blue;
	}
	
	
#sideBox {
	width:155px;
	float:left;
	margin-left:30px;
	border:0px dashed gray;
	padding:2px;
	}
	
#footer {
	width:700px;
	/*background-image:url(images/footerBar.gif);*/
	background-color:white;
	height:17px;
	border: 1px solid yellow; }

 

[ChrisHunt]

It sounds like you may be falling foul of IE's faulty "box model". Read about fixing it at

http://tantek.com/CSS/Examples/boxmodelhack.html

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[BillyRayPreachersSon]

Is it possible that the float: CSS properties are causing Netscape to behave the way it is? I found that using them inside other DIV tags where you need the height to be dynamic doesn't always work as expected.

Dan

 

[philote]

Try giving the footer clear: left in the stylesheet.

BTW, if you haven't heard me say so before, Mozilla comes with a DOM Inspector which is great at helping you find problems like this and experiment with your styles.

 

[4midori]

Thanks for the suggestions. clear:left seemed to fix it, but I have to check it out further. If the box model hack is for IE, why is it needed for Netscape?

 

[ChrisHunt]

"If the box model hack is for IE, why is it needed for Netscape?"

Because - technically - IE is behaving wrongly and NS is behaving correctly. You've written & tested your CSS using IE's (wrong) behaviour, it won't work with NS's (correct) behaviour.

Personally, I'm not too bothered about the rights & wrongs of what browser does what, the important thing is that hacks like this will help both browsers behave the same way - which is what we're after isn't it?

-- Chris Hunt

http://www.extracon.com

http://www.mcgonagall-online.org.uk

http://www.napitalia.org.uk

http://www.leicesteryha.org.uk

 

[philote]

You will probably need to use the box model hack to fix the right hand side of the divs. In IE there's extra space between the border and the 'flag' image and in Netscape the right borders on the 'footer' and 'main' divs are messed up. It may be easiest to design the site to look good in Netscape/Mozilla and then use the box model hack where necessary to make it look right in IE.