Firefox / IE6 Display Issue re. margins

[burtonfigg]

On this test page:

http://jimpix.co.uk/clients/a/photos/

I have a "sub navigation" UL below the main navigation UL.

When viewed in Firefox 3, there is a 10px gap between the subnav UL and the UL above, and the div below.

When viewed in IE6, that gap is doubled - see this screenshot:

http://jimpix.co.uk/clients/a/untitled.png

I can't work out why.

The #nagivation ul is defined as:

Code:

#navigation ul { 
float:left; 
width:100%; 
padding:0; 
list-style:none; 
background:#306090; 
margin: 0 0 10px 0; 
}

If I remove the 10px margin-bottom, then it sort of fixes it in IE6, by reducing the gap above the subnav UL, but it still leaves a huge gap below the subnav ul, and anyway, then it completely removes the gap in Firefox, so the main nav ul and subnav ul have no gap between them!

HTML = valid

Any advice much appreciated.

[drhowarddrfine]

I don't have IE on this box but you can look here to see if this is the cause. One of a bazillion IE bugs.

[burtonfigg]

Thanks for the reply. I tried adding in a display:inline but alas it doesn't fix it. Or, it fixes it for IE6, but not for FFox.

Could I hack it by having 1 CSS file for IE, and another for FFox, or is that too much hacking?

Thanks

Jim

[David Laakso]

Not sure what you mean? As of this writing the page appears to be identical in IE/6, IE/7, Mac Opera/9.52, Mac Safari/3.1.4, and Mac Firefox/3.0.2.

[burtonfigg]

Thanks for checking -

I test with IE6 and FFox 3. On IE6, the margins around the 'sub nav' are too wide.

I have done a few tests on BrowserCam here:

http://www.browsercam.com/public.aspx?proj_id=444442

On the IE6 screenshots, see how the top and bottom margins around the blue nav bar that starts with 'home' are loads bigger than when viewed in FFox or IE8?

I can't work it out! It's really strange.

Yet, a similar page I've done, using pretty much identical markup looks okay in IE6:

http://www.ama-online.org.uk/newsite/community/

How strange is that? I've even tried swapping the stylesheet from the page that works, and putting it into the jimpix page, and it removes the IE6 problem.

Seems to be something I've done in the CSS that has screwed it up, but I can't work out what!

[burtonfigg]

Done some more digging by comparing the page that works, with the one that doesn't work.

Problem is this bit of the HTML:

			<div id="ad">

			<img src="../css/img/200.png" class="floatleftclear" style="border:0px;" alt="jimpix" />

				<p>
					<script type="text/javascript"><!--
					google_ad_client = "pub-6959836182614616";
					google_ad_width = 728;
					google_ad_height = 65;
					google_ad_format = "728x90_as";
					google_ad_type = "text_image";
					google_ad_channel ="";
					google_color_border = "F5F6F9";
					google_color_bg = "F5F6F9";
					google_color_link = "FF3399";
					google_color_url = "008000";
					google_color_text = "333333";
					//--></script>

					<script type="text/javascript"
					  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
					</script>
				</p>
			</div>

With the #ad as:

#ad              { background-color:#F5F6F9; margin-bottom:10px; }

If I remove the google ads, it fixes the problem!

If I add this after the #ad end div:

<div class="cleared" ></div>

With the cleared class as:

div.cleared { clear:both; height:1px; }

Then it fixes the padding around the sub-nav, and adds a stupid huge gap above the main blue nav bar instead!

Am I doing something really silly?

Thanks

[David Laakso]

Keep it simple for all concerned. Can't hit a moving target, nor determine if we're on the same book and page. Point only to the page that shows the problem that needs correction.

[burtonfigg]

Sorry David, for wasting your time.
I've worked it out now. I don't know how, but by working against the page which didn't have the margin problem, I've fixed the original.
I'm sorry for flitting about all over the place.