CSS Crib sheet #1 - Gaps Between Vertical Nav Elements in IE5 | December 18, 2003

OK, I know the crib sheet idea isn't original but I've decided to start posting my own little CSS aid memoirs.

I do quite a bit of CSS development but always find myself coming across the same few silly little problems. Reading lists like CSS-Discuss, the same questions pop up time and again, so hopefully these posts may help out others as well.

My first crib sheet problem is a simple one. When creating a typical "Left Hand Menu" using Styled lists, whitespace appears between the nav elements in IE5. To fix this problem, simply set the containing li element to be inline.
If your anchors don't already have a width or height you'll need to apply one or the other to make sure IE creates a block box.
Here is an example of the CSS for a typical "Left Hand Menu" using a styled list:

#nav {
	margin: 0px;
	padding: 0px;
	text-align: left;
	list-style: none;
}

#nav li {
	display: inline;
	margin: 0px;
	padding: 0px;
	width: 142px;
	list-style: none;
}

#nav a:link {
	display: block;
	height: 14px;
	margin: 0px;
	padding: 0 0 0 10px;
	border-top: 1px solid #fff;
	font: bold 10px Verdana, Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
	background: #97A5BF;
	text-transform: uppercase;
}

#nav a:hover {
	text-decoration: none;
	background: #4E5F7E;
}

Posted at December 18, 2003 11:00 AM

Comments

Shaun Inman said on December 18, 2003 2:46 PM

While developing these unobtrusive XHTML pop-out menus <http://designologue.com/tmp/si_menus_fin.html> I came across a similar unexplainable gap on IE PC (all the way up to version 6!)

If you view source you can see my solution was to set the <li>s to float:left and clear:both for just IE PC. Closed that gap right up. If I remember correctly, the inline approach was breaking the position: relative/absolute relationship between the <li>s and their nested <ul>s in Safari.

ray said on December 18, 2003 3:06 PM

Great tip. I ran into the same problem on a current rework of a site. Now i can go back and remove that damned IE hack =)

Thanks!

Andy Budd said on December 18, 2003 3:34 PM

It’ll have something to do with margins. In my case, setting the anchor to inline stops vertical margins from having an effect. Floating elements also stops margins from interacting/collapsing.

See http://www.andybudd.com/blog/archives/000114.html

Klaus said on December 25, 2003 1:04 PM

Because I had to have both <li>’s and <a>’s displayed as block, I had search for another solution and it is quite simple:
Just place a whitespace (no  ) at the end of the anchor, like

<a href=”“>Menu </a>.

You can also use a <br />, which you can set to display: none, like

<li><a href=”“>Menu</a><br /></li>

Strange, isn’t it…

Dave Wolowicz said on January 7, 2004 10:19 PM

I have had a problem with the indentation of lists in IE5 for PC.

I have tried your solution and it works very well for IE and poorly for Firebird. I got massive spaces between items in firebird.

david said on June 23, 2005 3:00 PM

So simple, but i’ve been battling with IE5 + 6 for ages trying to sort this problem.
Ta very much!!

Gavin said on September 9, 2005 11:03 AM

Thanks a lot- I was really struggling with this one, your solution worked well.

Tebby said on January 24, 2006 2:47 PM

Great tip, saved a lot of head scratching.
Cheers