Here is the code example:
<html>
<head>
<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;
}
</style>
</head>
<body>
<div id="pagewrap">
<ul><li><span>one</span></li>
<li><span>two</span></li>
<li><span>three</span></li>
<li><span>four</span></li>
<li><span>five</span></li>
</ul>
</div>
</body>
</html>
<head>
<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;
}
</style>
</head>
<body>
<div id="pagewrap">
<ul><li><span>one</span></li>
<li><span>two</span></li>
<li><span>three</span></li>
<li><span>four</span></li>
<li><span>five</span></li>
</ul>
</div>
</body>
</html>
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;
0 comments:
Post a Comment