3 Ways to Get Rid of Spaces in List Item Navigation in IE6

If you’ve ever tried to create an all-css navigation for your website, then you’ve seen it: dreaded spaces when viewed in Internet Explorer 6 on Windows. This article will outline 3 different ways that you can get rid of these spaces in vertical list item navigation. And in the usual Belafonte style, these solutions are hack-free. (Who❤you?!)

Let’s start with a test navigation. We’ll jump right to the part where we’ve completed the navigation’s XHTML and CSS. Copy the following code into your own document if you want to follow along.

CSS

body {
	font: normal .9em Helvetica, Verdana, Arial, sans-serif;
	background: #FFF;
	color: #FFF;
}
#sideNav {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 200px;
	border: solid 1px #000;
}
#sideNav li {
	margin: 0;
	margin-bottom: 1px;
	background: #CCC;
}
#sideNav li a {
	text-decoration: none;
	color: #FFF;
	padding: 5px 3px;
	background: #000;
	display: block;
}

HTML

<ul id="sideNav">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Contact</a></li>
</ul>

This code is designed in the way that most nav lists would look. Also, most designers would want their links to change on rollover. Since IE6 does not recognize :hover pseudo classes when applied to any element that’s not the a tag, we have cannot simply apply the hover to the li tag. Therefore, in order to achieve the rollover, we went ahead and applied display:block to the link so that the rollover color will fill the entire button area.

This is where the problem comes in. If we apply a background color (yellow) to the li element, we can see that the gap that appears below the link element has something to do with either the outside of the a or the inside of the li.

Menu in IE6 with BG color Applied

Above: Test menu in IE6 after display:block applied to links. Notice the yellow from list items area showing between block-level links.

Space Removal Method 1: Define Border-Bottom

I came up with this solution a few years back and found this to be the simplest fix for the problem: add a border to the bottom of the li element. If your navigation has divisions between the links, then this is a perfect fit. You see how we have a margin-bottom:1px; applied to the list item? We can simply write in border-bottom:solid 1px #FFF; and eliminate the margin-bottom property. So, we still get the one-pixel white separation, and our gaps disappear in IE6. Success!

Space Removal Method 2: Define Link Width

One of my theories about where the gap comes from is that I imagined there to be an unseen hard return at the end of the link. In my vision, this hard return gets dropped down below the link when display block pushes the link all the way edge to edge. With that in mind, I decided to see what would happen if I reduced the width by one pixel or even made it match the width of the containing element.

So, I added width: 200px; to the a to exactly match the width we defined for our nav as a whole. (You could also use width: 100%; but sometimes that doesn’t work.) If my theory of why this happens is close, then this would keep the line return from dropping down below the link. BAM! It worked! The caveat here is that if you have any left/right padding applied to the link element, compliant browsers will add that to the total width. So, if you go with this method, you’ll have to adjust for that accordingly. (My preferred method is to send different widths to each browser using conditional comments for IE.)

Padding added in compliant browsers

Notice how, since we have 3 pixels of padding applied to both sides, defining the links’ width as ’200px’ results in a 206-pixel width in compliant browsers.

Space Removal Method 3: IE Whitespace Fix Using Floats

After a long time of using the methods described above, I came across some prett useful information: this phenomenon has a name. It has been dubbed the “IE Whitespace Bug”. If I had known that, I could have just looked it up online and moved along. (It’s OK. I ain’t mad.) Anyway, when I did a search for solutions on this bug, I found tons of hacky “solutions”. Some involved commenting out the space after the li, others had a couple of Tantek-styled backslashes. {shudders}

I found this one at Jon Hicks‘ website, which involves floating and clearing the list item surrounding the link. In an IE6-specific conditional stylesheet, I make sure to include the following in my rule for the navigation li:

#sideNav li {
	float: left; 	/* IE WHTESPACE BUG */
	clear: left;	/* IE WHTESPACE BUG */
	width: 200px; 	/* IE WHTESPACE BUG */
}

Note: it’s always good practice to add notes to remind you why you added something. This way, if you choose to go a different route to solve this bug, you know which declarations to remove.

A few things to understand about this method: The width must be defined on the list item once it’s floated. If it’s not, it will collapse down onto the text that it contains. Also, the containing element must be floated as well, since only floated elements can wrap to contain other floated items. Since this is probably a sidebar navigation, it will likely be floated already, so this shouldn’t be a problem.

I know that there are lots of solutions presented to fix gaps in IE6. These are the ones that I choose since they don’t require much to remember and don’t use hacks.

IE Nav Success

Comments

11 Comments

  1. Yaili writes:

    Great!
    Yesterday I left work with this bug to fix in one website, thinking: “I’ll address it tomorrow…” Now the answer just came to me into my RSS feed! :)
    By the way, I used method 3, but added it to the normal css, for all browsers, because both IE7 and IE6 were doing it, and it worked fine.
    Thanks.

  2. .abelafonte writes:

    @Yaili – Yeah, I had heard about it happening in IE7, but I hadn’t experienced it.

    The way you went about it is perfect in that case.

    Awesome, glad I could help!

  3. Brandon writes:

    Thank you! Saved me another 3 hours of headaches…

  4. B writes:

    I’ve never used that third method! Great job. Definitely something to refer back to in a time of need.

  5. CSK writes:

    Great page, thanks a lot!

    I have two more question: can someone confirm that IE7 has the same bug?
    Do the presented methods apply for IE7 too?

  6. .abelafonte writes:

    I can say that I’ve never seen this happen in IE7.

  7. Ken Hanson writes:

    I’ve never had this problem to date honestly, and I think it’s because of the CSS Reset I start with on every site, or the way I do every single list.

    Below are the key elements I use in the reset that, if not fixing the issue, will atleast shorten up that code you have for your list above:

    /* Normalizes Margin, padding */
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td
    {
    margin: 0;
    padding: 0;
    }

    /* Removes list-style from lists */
    ol, ul { list-style: none; }

    The entire thing is at: http://www.markupninjas.com/ma...Ninjas.css

    Also, another ninja clearing thing to do is to go to the wrapper and add: Overflow: hidden; (in this case, it would be your LI that is the wrapper of the floated items).

    It will make the LI act like it floated and cleared the anchor tags float. This typically works best if you don’t declare a height, but you can if you need to. No clear: both; needed, and you can use this reliably across the board, ie6, ie7, safari on pc, safari on mac, firefox on both.

    If you master that overflow trick (which is not a hack by the way, its actually in the w3c spec), your one step closer to a single stylesheet, no hack, no clearfix solution :D

    Anyways, back to the issue, I actually just typically do what you did on Step 3 and it works across the board again.

    One trick I learned that helps with the width’s and such is: to rid yourself of the spacing, you only need the LI to float, as well as the anchor. So no width is actually needed for your LI.

    Typically, I’ll do all my padding, width, and margins on the anchor, which pushes around the LI’s etc etc. That way, when width changes, you go to one source for the width adjustments.

    Anyways, just a few thoughts from my end, great post Aaron. Yeah, I kinda do have a crush on UL styling ;)

  8. Eric Puidokas writes:

    Try putting zoom:1; on the

  9. Linkdump März 2009 – Webdesign [martin-grandrath.de] writes:

    [...] 3 Ways to Get Rid of Spaces in List Item Navigation in IE6 – Belafonte Code [...]

  10. Andreas writes:

    Just fixed an IE problem with your help, thanks! Your top menu is a little buggy when somone loads your page the first time, why you dont use image-sprites for the menuitems?

  11. .abelafonte writes:

    Yeah, I’ve been meaning to put sprites in the nav, but I’ve been tied up with other projects.

Add Your Thoughts: