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

By: .abelafonte

.abelafonte — Tue, 05 Jan 2010 20:09:07 +0000

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

By: Andreas

Andreas — Tue, 05 Jan 2010 13:41:44 +0000

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]

Linkdump März 2009 – Webdesign [martin-grandrath.de] — Wed, 01 Apr 2009 13:15:41 +0000

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

By: Eric Puidokas

Eric Puidokas — Tue, 22 Apr 2008 19:33:46 +0000

Try putting zoom:1; on the

By: Ken Hanson

Ken Hanson — Fri, 14 Mar 2008 18:14:03 +0000

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

.abelafonte — Sat, 23 Feb 2008 01:06:39 +0000

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

By: CSK

CSK — Fri, 22 Feb 2008 14:45:24 +0000

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

Tue, 12 Feb 2008 03:43:11 +0000

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

By: Brandon

Brandon — Mon, 28 Jan 2008 06:19:40 +0000

Thank you! Saved me another 3 hours of headaches…

By: .abelafonte

.abelafonte — Fri, 18 Jan 2008 13:23:04 +0000

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