Wednesday, March 11, 2009

IE family does not support display: none on span in ul li

I just discover that IE 6 & 7 are not following the display: none; rule in the span inside the li. I wonder where else has the same problem.

Here is the code example:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> new document </title>
<style type="text/css">
* {
margin: 0;
padding: 0;

ul {
list-style: none;
width: 100px;
background: blue;

ul li {
width: 100px;
height: 20px;
background: green;
border: 1px solid red;
Vertical-align: top

ul li span {
display: none;

<div id="pagewrap">

So as you can see in IE it adds a gap between the li tags even thought its told to ignore the span and its content. I have found ways to make it work all listed below

1. Set ul li to float: left; <-- but maybe you dont want the ul li to be floated so that doesnt work -->

2. Set the ul li span to display: inline;margin:-500px; <--- but then you have to add overflow: hidden for ie6 to be truelly happy, and just doesnt seem right

3. Similar to 2 with the same issues but using text-indent: -5000px; on the ul li a tag again just doesnt seem right.

4. This seems to be the best solution that I have found and going to look into why a little more is to set the ul li to Vertical-align: top; or Vertical-align: bottom;


Post a Comment