Update 18-Dec-2003: I found out that using the vertical-align: bottom method doesn't work if you change the font size on the <a> to anything smaller than the default size. I didn't notice this at first because I set font size in the body:
body { font-size: 76%; }
a { font-size: .8em; } /* Doing this will cause gaps to appear again. Doh! */
A more reliable way of getting rid of the IE5+ gap is listed at the end of this document. I couldn't use this method in a particular situation though and that's why I came up with the vertical-align: bottom method.
I recently ran into an IE5.x/Win bug while trying to create a vertical css menu from an unordered list of links which needed to have a width specified. IE5 would leave a 3-4 pixel gap between each list item.
Here is a simplified version of the HTML I used:
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
</ul>
This is what it looks like without css:
Here is a simplified version of the CSS I used:
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
}
ul li a {
background: #f00;
color: #fff;
display: block;
width: 10em;
}
ul li a:hover {
background: #fa8072;
}
This is a live sample of what it looks like in your browser:
This is a GIF of the expected output (Confirmed in the following Windows browsers: Gecko, Opera 5+, IE5.5+):
This is a GIF of what it looks like in IE5/Win:
After searching the web for a solution and finding nothing, I came up with this css by accident!
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
}
ul li a {
background: #f00;
color: #fff;
display: block;
vertical-align: bottom; /* This fixes the IE5 Win gap! */
width: 10em;
}
ul li a:hover {
background: #fa8072;
}
Live view of the CSS listed above (Looks the same in all Windows browsers mentioned previously):
The same problem can also occur if you set the width of the <li>, then set the width of the <a> as a percentage.
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
width: 10em;
}
ul li a {
background: #f00;
color: #fff;
display: block;
width: 100%;
}
ul li a:hover {
background: #fa8072;
}
This is a live sample of what it looks like in your browser:
The gap is removed by setting vertical-align: bottom on the <li> tag
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul li {
margin: 0;
padding: 0;
vertical-align: bottom; /* This fixes the IE5 Win gap! */
width: 10em;
}
ul li a {
background: #f00;
color: #fff;
display: block;
width: 100%;
}
ul li a:hover {
background: #fa8072;
}
This is a live sample of what it looks like in your browser:
Since finding out that the method above isn't exactly perfect, I'll show you the method I usually use:
ul {
list-style: none;
margin: 0;
padding: 0;
width: 10em;
}
ul li {
display: inline; /* this gets rid of the gaps */
list-style: none;
margin: 0;
padding: 0;
}
ul li a {
background: #f00;
color: #fff;
display: block;
width: 10em; /* or use height (tricks IE into letting you click anywhere on the block, not just the text */
}
ul li a:hover {
background: #fa8072;
}
This is a live sample of what it looks like in your browser:
I have only done minimal testing with this on a limited set of Windows browsers. If you have anything to add, please contact me.