| IE7 Horizontal Menu
Li seem to be nesting within each other! |
smolkenthin
msg:4426027 | 2:11 pm on Mar 7, 2012 (gmt 0) |
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
msg:4427882 | 5:35 pm on Mar 11, 2012 (gmt 0) |
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}
|
|
|
