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;
}
Comment
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.
Comment
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!
Comment
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
Comment
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…
Comment
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.
Comment
So simple, but i’ve been battling with IE5 + 6 for ages trying to sort this problem.
Ta very much!!
Comment
Thanks a lot- I was really struggling with this one, your solution worked well.
Comment
Great tip, saved a lot of head scratching.
Cheers
Comments on: CSS Crib sheet #1 - Gaps Between Vertical Nav Elements in IE5
Jump to the comment form