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

By: .abelafonte

2010-01-05T20:09:07Z

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

By: Andreas

2010-01-05T13:41:44Z

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?

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

2009-04-01T13:15:41Z

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

By: Eric Puidokas

2008-04-22T19:33:46Z

Try putting zoom:1; on the

By: Ken Hanson

2008-03-14T18:14:03Z

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 😀

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 😉

By: .abelafonte

2008-02-23T01:06:39Z

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

By: CSK

2008-02-22T14:45:24Z

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?

By: B

2008-02-12T03:43:11Z

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

By: Brandon

2008-01-28T06:19:40Z

Thank you! Saved me another 3 hours of headaches…

By: .abelafonte

2008-01-18T13:23:04Z

@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!