BeWebmaster

IE6 Whitespace Bug in bulleted list

Ad

There are many ways you can fix IE6 whitespace bug in bulleted lists. One of them is to create a separate style sheet for IE6 and use a conditional statement to load it.

However there are couple of techniques you can use without conditional statements.

First technique: remove the white space manually

Simply make sure all "li" tags are in one line:

<ul><li>list item one</li><li>list item two</li><li>list item three</li><li>list item four</li></ul>

This technique works. However it greatly decreases the readability of the HTML. If you use this technique make sure to include a comment explaining why you are doing it. That way your client can keep the same format when updating the HTML.

Second technique: use float:left

Just recently I tried adding float:left to the "li" and it worked. However this only works if the width of the link  "a" inside the "li" is set to the same width of the box containing the list.

HTML

Here is a sample of navigation box.

<div id="navigation">
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
</ul>
</div>

CSS

Here is a way to style navigation box. Please not the comments that fix the white space.

#navigation {    
 width: 382px;
}
#navigation ul {
    list-style: none;
    width: 382px;
    text-align: center;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 14px;
}
#navigation li {
    margin: 0px;
    padding: 0px;
    float: left; /*FLOAT LEFT TO FIX SPACE ISSUE WITH IE*/
}
#navigation   li  a  {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: normal;
    color: #000000;
    text-decoration: none;
    width: 382px; /*GOES WITH FLOAT LEFT FOR LI TO FIX SPACE ISSUE WITH IE*/
}
#navigation    li   a:hover{
    color: #CCCCCC;
}