1

I know this IE problem comes up time and time again but I have spent all morning searching for answers and none seem to help me.

My horizontal navigation menu seems to render perfectly in all browsers except for IE7. I am thinking the problem could possibly be to do with my lists having no widths (but I do not want widths, I want it to be automatic depending on the length of the text), either that or the li's seem to be sitting within each other and keep applying the 14px padding-top. I do not know why they are sitting inside each other though as my li's all have closing tags and a float:left;

Here is my code..

<div id="navig"> <ul> <li class="navig-left"></li> <li class="home"><b>Home</b></li> <li><a class="tabs" href="about.html">About Us</a></li> <li><a class="tabs" href="services.html">Services</a></li> <li><a class="tabs" href="personal-injury-panel.html">Personal Injury Panel</a></li> <li><a class="tabs" href="client-testimonials.html">Client Testimonials</a></li> <li><a class="tabs" href="contact.html">Contact Us</a></li> <li><a class="tabs" href="careers.html">Careers</a></li> <li><a class="tabs" href="affiliates.html">Affiliates</a></li> <li class="navig-right"></li> </ul> </div> <div class="clr"></div> #navig { width:960px; height:46px; background:url(images/navig_bkgrnd.png); } #navig ul { list-style-type:none; height:46px; width:960px; } #navig ul li.active { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; background:url(images/navig_hover.gif) repeat-x; color:#000000; font-weight:200; font-size:14px; font-style:normal; } #navig ul li.home { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; color:#ffffff; font-weight:200; font-size:14px; } #navig ul li a.tabs { float:left; height:32px; text-align:center; display:block; padding:14px 21.3px 0; text-decoration:none; color:#FFFFFF; font-weight:200; font-size:14px; font-style:normal; } #navig ul li a:hover { display:block; text-decoration:none; height:32px; font-family:Arial, Helvetica, sans-serif; color:#000000; font-weight:200; font-size:14px; font-style:normal; background:url(images/navig_hover.gif) repeat-x; } .navig-left { float:left; width:23px; height:46px; background:url(images/navig_left.png); } .navig-right { float:left; width:23px; height:46px; background:url(images/navig_right.png); }
Improve this question
2
  • While im testing your code quick comments: list-style-type:none; should be declared on a li, not ul, this can give problems. And: why does your a have float:left; And you are never targeting your normal li's in your css, just the navigation, home and active ones. Fix these things and you'll be in the clear probably... Commented Mar 9, 2012 at 14:27
  • thankyou! it was because i hadn't given a float left to my normal li's, i have changed the other couple of things you mentioned too, lessons learnt for next time, thankyou for your help :) Commented Mar 9, 2012 at 15:16

2 Answers 2

Reset to default
1

Try adding the following CSS rule so that all li items float (since you're using a float approach):

#navig ul li {float:left;}

Looking at your stylesheet, you don't actually apply float:left to all of the list items in the menu, only li.activeand li.home. Other browsers seem to deal with it but IE doesn't like it.

jsFiddle (note I had to modify some colors to get it working since you are using white text over background images we don't have access to - causing white on white for testing purposes.)

I tested this fiddle in IE 7/8/9, FF and Chrome. Works consistently now.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

brilliant!! thankyou so much, can't believe it was that simple but sometimes your too close to see it and all goggle eyed from staring at code! thanks again :)
@smolkenthin Great glad it solved the issue. Please remember to upvote and mark as answer if you feel it's the appropriate solution.
0

You can force IE7 to render as ie8 adding this in head of your page.

<meta http-equiv="X-UA-Compatible" content="EDGE" />
Improve this answer

5 Comments

How can you force a browser to render in a version newer than itself? Plus content="edge" forces all IE versions to render as latest version possible, which is not actually recommended my MS.
Straight from MS: Because edge mode documents display webpages using the highest mode available to the version of Internet Explorer used to view them, it is recommended that you should only use this document mode for testing purposes only. Do not use it for production uses. msdn.microsoft.com/en-us/library/ie/cc288325%28v=vs.85%29.aspx
@KP My dear friend I used it on several of my applications and it works just fine, if you have a better ideea you can write it but don't ask other participants about their response ;)
LOL are you serious? Everyone here has a right to question or discuss answers. That's the purpose of this site. Don't ask other participants to keep their mouths shut if they feel your answer is flawed they have the right to comment. And btw I already answered the question with what I feel is a 'better idea' as you put it. Cheers my dear friend.
-1 just agree with KP. The objective is to support users who haven't upgraded their browser.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.