By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,696 Members | 1,607 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,696 IT Pros & Developers. It's quick & easy.

Firefox / IE6 Display Issue re. margins

P: 32
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:

Expand|Select|Wrap|Line Numbers
  1. #navigation ul { 
  2. float:left; 
  3. width:100%; 
  4. padding:0; 
  5. list-style:none; 
  6. background:#306090; 
  7. margin: 0 0 10px 0; 
  8. }
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.
Oct 5 '08 #1
Share this Question
Share on Google+
7 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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.
Oct 5 '08 #2

P: 32
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
Oct 5 '08 #3

Expert 100+
P: 397
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.
Oct 5 '08 #4

P: 32
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!
Oct 5 '08 #5

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

Problem is this bit of the HTML:

Expand|Select|Wrap|Line Numbers
  1.             <div id="ad">
  2.  
  3.             <img src="../css/img/200.png" class="floatleftclear" style="border:0px;" alt="jimpix" />
  4.  
  5.                 <p>
  6.                     <script type="text/javascript"><!--
  7.                     google_ad_client = "pub-6959836182614616";
  8.                     google_ad_width = 728;
  9.                     google_ad_height = 65;
  10.                     google_ad_format = "728x90_as";
  11.                     google_ad_type = "text_image";
  12.                     google_ad_channel ="";
  13.                     google_color_border = "F5F6F9";
  14.                     google_color_bg = "F5F6F9";
  15.                     google_color_link = "FF3399";
  16.                     google_color_url = "008000";
  17.                     google_color_text = "333333";
  18.                     //--></script>
  19.  
  20.                     <script type="text/javascript"
  21.                       src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  22.                     </script>
  23.                 </p>
  24.             </div>
With the #ad as:

Expand|Select|Wrap|Line Numbers
  1. #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:

Expand|Select|Wrap|Line Numbers
  1. 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
Oct 5 '08 #6

Expert 100+
P: 397
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.
Oct 5 '08 #7

P: 32
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.
Oct 5 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.