Expressing IT

If you  have ever made ( or making one) a Vertical Menu using list items( li) tags and CSS, you  might encounter, this yet another bug in Internet Explorer, where IE 6 inserts these gaps between list items that contain block level elements, i.e. if there is any whitespace between the list items in the markup.  Thanks, but no thanks , the IE version 7  seems free from this bug.
If like me , and many more, you  belong to this  band of frustrated developers , who still have to get their new layouts , working in IE6 too, then this might prove useful . Have a look…

Sample markup:

<ul id=”menu”>
<li ><a href=”#”>Home</a></li>
<li ><a href=”#”>About</a></li>
<li ><a href=”#”>Services</a></li>
<li ><a href=”#”>Portfolio</a></li>
<li ><a href=”#”>FAQ</a></li>
<li ><a href=”#”>Contact Us</a></li>
</ul>

You might create some CSS , similar to one below, to transfrom the above  markup into a vertical menu ….

Sample CSS…
#menu {
margin: 0;padding: 0;background: #FF9900;
list-style-type: none;width: 150px;
}
#menu li {margin: 0;padding: 0;}
#menu  a {display: block;
color: #555555;
text-decoration: none;
padding: 0 15px;
line-height: 2.5; border-bottom:1px solid #FFF;
}

The results you will see…

Solution for this bug…(modified/added CSS in bold italics)

#menu {
   margin: 0;padding: 0;background: #FF9900;list-style-type: none;width: 150px;
  float: left; /* this contains floated list items */
}
#menu li {
    margin: 0;padding: 0;
   float: left;      /* This fixes the */
   width: 100%;  /*  whitespace bug in IE6 */
}
#menu a {
   display: block; color: #555555;
   text-decoration: none;
   padding: 0 15px;
   line-height: 2.5; border-bottom:1px solid #FFF;
}

If the above solution doesnot seem to work (for reasons known to IE6 only)… try this method instead

Just add this additional IE6 only styles to your markup …

<!–[if lt IE 7>
<style type="text/css">
#menu li a {display:inline-block;}
#menu li a {display:block;}
</style>
<![endif]–>