extra space in list (IE 6 and IE 7)

[trick]

I know this must have a solution, but I can't quite isolate it. I have an unordered list that I'm styling for a navigation element, but IE keeps adding space to it. Even more frustrating is that IE6 and IE7 bug out in slightly different ways. If I could just get it close enough to pass I'd be happy! Between each item in the list I also have a "between" li, which is just there to split up the links.

Here's my CSS code (the background colors are for debugging):

* html ul li {height:1em; vertical-align:bottom;}
#sidenav {width:148px; margin-top:5px; margin-bottom:0px; padding-bottom:0px; padding-top:7px; padding-left:13px}
#sidenav ul li {font: 10px/18px Verdana, Arial, Helvetica, sans-serif; color:#fff; width:133px; text-indent:8px; background-color:#F16921; margin:0}
#sidenav ul li a {display: block; color:#3c3c3c; background-color:#dbdbdb;}
#sidenav ul li a:hover {background-color:#8c8c8c; text-decoration:none}
#sidenav ul .between {background-color:green; height:3px; line-height:0px}

and here is the HTML;

<div id="sidenav">
 <ul>
 <li>Introduction</li>
 <li class="between"></li>
 <li><a href="#">Management</a></li>
 <li class="between"></li>
 <li><a href="#">Recent News</a></li>
 <li class="between"></li>
 <li><a href="#">Press</a></li>
 <li class="between"></li>
 <li><a href="#">Support</a></li>
 <li class="between"></li>
 <li><a href="#">Newsletter Signup</a></li>
 <li class="between"></li>
 <li><a href="#">Careers</a></li>
 <li class="between"></li>
 <li><a href="#">Partners</a></li>
 <li class="between"></li>
 <li><a href="#">Contact Us</a></li>
 </ul>
</div>

I've tried every solution I can find, but nothing seems to shrink the gaps. Help?!?

Thanks!

[ASiebersma]

This is a fairly well documented bug in IE. The long and short of it is that IE erroneously displays any extra whitespace between the tags of your list elements.

Placing your list entirely on a single line will fix. I believe that placing your linebreaks directly in front of the closing tag of each li tag will do it as well.

<ul><li>Introduction</li 
><li class="between"></li 
><li><a href="#">Management</a></li 
><li class="between"></li 
><li><a href="#">Recent News</a></li 
><li class="between"></li 
></ul> 

[trick]

I did try putting it all on one line, with no effect. : (

Must be something else...

[dave_f]

In your .between class, make the font-size 1px like this.

#sidenav ul .between {background-color:green; height:3px; line-height:0px;font-size:1px}

This will solve the problem in IE6. Have not been able to test it on IE7.

As the font size was previously defined as 10px/18px, the .between li element was (wrongly) expanding to accomodate this font-size for the white space.

[pageoneresults]

Is it possible that you have a padding issue somewhere? Maybe add

padding:0;

to the ul li? There may be something else cascading down that we cannot see from another rule. And then again, this could be one of those oddball IE bugs?

[trick]

YES! Thank you dave. Worked like a charm for both IE6 & IE7.

Thank you!

: D

[npwsol]

Don't use a "between" li to seperate your list! That's what margins and padding are for. It's just needless markup :\

[trick]

I did it that way so that I don't have to add an "active" class for every new page. See the li has an orange background, and the linked li has grey. so if I padded the li there would be weird orange lines under the grey, linked lis. And if I padded the link lis the spacing would be inconsistent between pages. This way I can remove a link and it will automatically have the active orange background. Just makes it a bit easier to roll out the pages.

[SuzyUK]

I did it that way so that I don't have to add an "active" class for every new page

well apart from the fact that doesn't really make sense, CSS can do this beautifully without scripting an "active" class

I'm thinking (feel free to shout!) you are not really using CSS for separation of design, you're imposing your design ideas on your HTML markup?

extra <li> items will be read by screen readers, focused by tab keys, and just might be picked up weirdly by RSS feeds!

sorry, but while I know it's fine in general just to get things working, make sure that the "fix" is the right one for you and your site, there are other ways to workaround this IE weakness, but it will depend on your requirements

[trick]

Suzy, you are correct that I'm not separating design / HTML. I'm doing what will make implementing the site easiest. This way the active navigation element won't require me adding any markup to it. If there were a simpler way I would use it in a heartbeat.

You say I don't need to do it this way, but I only see 2 choices: my way or having an "active" class that would have the same style (padding especially) as the "li a" but with orange bg. Let me explain what is happening now a bit better:

the ul (and the page itself) has a white background
the "li"s have an orange background
the "li a"s have a grey background
there is a 3 px space between each li which is also white

-- if you delete the "between" lis and add padding to the li, you will have orange peek through
-- if you intead add padding to the "li a" you will get no peek though, but the li with an active state (no link, no a) will not be padded to match, so the list will be spaced inconsistently as you go to different pages (solution: add an active class with padding and orange bg)

does that make sense? if there's something I'm missing let me know!

: )

[dave_f]

Trick, The effect you are looking for can easily be achieved much more economically by:

1. Removing the the .between li elements.
2. Adding a background-color to the ul element instead of the .between li's (in this case green)
3. Adding a 3px margin top and bottom to the remaining li elements.

You may have to add special classes for the first and list li elements to remove the top or bottom margin.

[trick]

Ah, you are correct again Dave. I think I tried margin-bottom alone and that didn't work, but didn't think it all the way through.

Thanks!

and here's the new CSS:

#sidenav {width:148px; margin-top:5px; margin-bottom:0px; padding-bottom:0px; padding-top:7px; padding-left:13px}
#sidenav ul li {display: block; font: 10px/18px Verdana, Arial, Helvetica, sans-serif; color:#fff; width:133px; text-indent:8px; background-color:#F16921; margin-top:3px; margin-bottom:3px}
#sidenav ul li a {display: block; color:#3c3c3c; background-color:#dbdbdb;}
#sidenav ul li a:hover {background-color:#8c8c8c; text-decoration:none}

I was even able to delete this:

* html ul li {height:1em; vertical-align:bottom;}

Thanks again!

^_^b