HI Eric,
It's ok I built a test case that exhibits the bug.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0
}
ul,li {
list-style:none;
}
.holiday {
float:left;
margin-right:100px;
padding:0;
display:inline; /* ie6 */
border:1px solid #000;
background:red;
/*list-style:outside;*/
}
</style>
</head>
<body>
<ul class="holiday">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
<ul class="holiday">
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</html>
It seems that when you add display:inline to the floated list then IE set the space for the bullet to list-style:inside although the bullet is not actually showing because you have specified none.
Using list-style
utside corrects this.
When you use list-style:inside it turns the bullet marker into an inline element so I guess this is some kind of reverse logic in that if you have an inline element then the list-style:inside is probably the default for IE6 and 7.
This seems to hold true as this simple test case shows space on the left as soon as you make the ul display:inline.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
* {
margin:0;
padding:0
}
ul {
list-style:none;
display:inline;
}
</style>
</head>
<body>
<ul>
<li>test</li>
</ul>
</body>
</html>
IE6/7 have loads of bugs with lists and it seems they were very poorly implemented from the start.
IE8 seems ok.
Reply With Quote
Originally Posted by EricWatson
Bookmarks