IE7 Horizontal Menu

Li seem to be nesting within each other!

[smolkenthin]

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

[Paul_o_b]

Hi,

You floated the anchors but not the list element which remain as block and creates a staircase effect in IE7 as block elements are always at least as tall as the line-height in that browser.

Float the list elements also (or set them to display:inline if you aren't using them at all).

#navig ul li{float:left}