CODEWITHSUNDEEP
htmlcssinternet-explorer-7html-listsinternet-explorer-6
smolkenthin
smolkenthin

Reputation: 11

IE7 CSS Horizontal Menu - Li's seem to be nesting within each other

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); }

Upvotes: 1

Views: 1716

Answers (2)

mcmwhfy
mcmwhfy

Reputation: 1686

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

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

Upvotes: 0

KP.
KP.

Reputation: 13720

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.

Upvotes: 1

Related Questions