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
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.