NS 8.1/Win, Display Like FF ISN'T DISPLAYING LIKE FF?

m9d · Mar 9, 2007

I am testing my code in as many browsers as I can get my hands on and found that Netscape 8.1.2 isn't displaying properly when set to "Display Like Firefox".

I am trying to float 4 DIVs across my footer, and the 4th floated DIV is falling under the 3rd floated DIV. If I change the width by 3 pixels, it displays properly. If I add more content to the 3rd floated DIV, it displays properly. Unfortunately those aren't options for my layout.

It also displays properly when Netscape is set to "Display Like Internet Explorer" and it works when you look at it in Firefox 1.5, so I am not sure why Netscape is having a problem with my code.

I wish I could post a link, but that is a no-no here. I have stripped away all the excess code to make it easier to see the problem. Please take a look at my CSS + XHTML below. I appreciate any and all suggestions!

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
<!--
* {margin: 0; padding: 0;}
body {font-family: Verdana, Arial, sans-serif;
   font-size: 0.8em;
   font-style: normal;
   font-weight: normal;
   line-height: 150%;}
#container {width: 770px; overflow: hidden;}

#footer {width: 770px;}

#footerSiteLinks {padding: 0 0 0 10px; width: 760px; border-bottom: 1px solid #CDCDCD; overflow: hidden;}
* html #footerSiteLinks {width: 770px; w\idth: 760px;}
.footerSiteLinkBlock {padding: 6px; width: 178px; font-size: 0.75em; float: left;}
* html .footerSiteLinkBlock {width: 190px; w\idth: 178px;}
.footerSiteLinkBlock h2 {font-size: 1em;}

-->
</style>

</head>

<body>
<div id="container">

<div id='footer'>
      <div id='footerSiteLinks' style='background:#FFAA00;'>
         <div class='footerSiteLinkBlock' style='background:#FF0000;'>
            <h2>SIX</h2>
            <p>SIX</p>
            <p>SIX</p>
            <p>SIX</p>
            <p>SIX</p>
            <p>SIX</p>
         </div>
         <div class='footerSiteLinkBlock' style='background:#FFFF00;'>
            <h2>FOUR</h2>
            <p>FOUR</p>
            <p>FOUR</p>
            <p>FOUR</p>
         </div>
         <div class='footerSiteLinkBlock' style='background:#FF0000;'>
            <h2>TWO</h2>
            <p>TWO</p>
         </div>
         <div class='footerSiteLinkBlock' style='background:#00FFFF;'>
            <p>ONE</p>
         </div>
      </div>
</div>

</div>
</body>
</html>

traingamer · Mar 12, 2007

It really sounds like you should be reporting that to Netscape rather than here.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

m9d · Mar 12, 2007

I have reworked the original code and now float LIs in a UL rather than using DIVs. I also have removed the overflow:hidden value from the #container and added float:left values to all the parent elements above the floated LIs.

I have tested this in WinXP/ FF 1.5, NS 8.1, NS 7.1, IE 7, IE 6, IE 5.5 and Opera 9. Here is my code, please let me know if I am missing something.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<style type="text/css">
* {margin: 0; padding: 0;}
body {font-family: Verdana, Arial, sans-serif;
	font-size: 0.8em;
	font-style: normal;
	font-weight: normal;
	line-height: 150%;}
#container {width: 770px; float: left;}

#footer {width: 770px; float: left;}

ul#footerSiteLinks {display: block; padding: 0 0 0 10px; width: 760px; border-bottom: 1px solid #CDCDCD; list-style: none; float: left;}
* html ul#footerSiteLinks {width: 770px; w\idth: 760px;}
li.footerSiteLinkBlock {padding: 6px; width: 178px; font-size: 0.75em; float: left;}
* html li.footerSiteLinkBlock {width: 190px; w\idth: 178px;}
li.footerSiteLinkBlock h2 {font-size: 1em;}
</style>

</head>

<body>
<div id="container">

<div id='footer'>
		<ul id='footerSiteLinks' style='background:#FFAA00;'>
			<li class='footerSiteLinkBlock' style='background:#FF0000;'>
				<h2>SIX</h2>
				<p>SIX</p>
				<p>SIX</p>
				<p>SIX</p>
				<p>SIX</p>
				<p>SIX</p>
			</li>
			<li class='footerSiteLinkBlock' style='background:#FFFF00;'>
				<h2>FOUR</h2>
				<p>FOUR</p>
				<p>FOUR</p>
				<p>FOUR</p>
			</li>
			<li class='footerSiteLinkBlock' style='background:#FF0000;'>
				<h2>TWO</h2>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
				<p>TWO</p>
			</li>
			<li class='footerSiteLinkBlock' style='background:#00FFFF;'>
				<p>ONE</p>
			</li>
		</ul>
</div>

</div>
</body>
</html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

NS 8.1/Win, Display Like FF ISN'T DISPLAYING LIKE FF?

m9d

Technical User

traingamer

Programmer

m9d

Technical User

Similar threads

Part and Inventory Search

Sponsor