Hi,
There is bug in IE when I try to float <li> to left and the bullet style just disappear! but it is absolutely fine on other browsers!
How can I get around on IE??
this is the css,
body {
font: 1em arial, helvetica, sans-serif;
}
ul {
border: 2px solid black;
overflow:hidden;
}
li {
border: 2px dotted #ccc;
bfackground: #ccc;
float:left;
list-style-position: inside;
}
this is the html,
<ul>
<li>This</li>
<li>That</li>
<li>The other</li>
</ul>
this is the link to see the page,
http://lauthiamkok.net/tmp/css/bullet/bullet.php
Many thanks,
Lai
Rayzur
July 13, 2010, 6:32pm
2
How can I get around on IE??
Hi,
The best way to get x-browser consistency is to use a bullet BG image on the anchor with left padding.
However it can be done with CSS by setting the anchor as display:list-item to get the bullet there on all browsers. You will not get consistent positioning of the bullet though. IE8 will give extra space at the left.
<!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" xml:lang="en">
<head>
<title>Lists 5</title>
<style type="text/css" media="all">
body {
font: 1em arial, helvetica, sans-serif;
}
ul {
overflow:hidden;
margin:0;
padding:0;
border:2px solid #000;
list-style:none;
}
li {
float:left;
}
li a {
display:list-item;
padding:1px 4px;
list-style-type:disc;
list-style-position:inside;
background:#CCC;
border:dotted #000;
border-width:2px 2px 2px 0;
text-decoration:none;
color:#000;
}
li a:hover {
background:#F00;
color:#FFF;
}
</style>
</head>
<body>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</body>
</html>
And to answer the “why?”… IE considers “float: left” to be something completely different from “display: list-item” (which is the default for li’s). As far as IE is concerned, if you set the display of a li to anything else, it can’t have a bullet anymore because it’s no longer display: list-item. Other browsers keep both your display setting and the list-item.
Nice tip on the manual setting of list-item, Ray. I didn’t know that you could do that on floats and have it actually work in IE.
Rayzur:
Hi,
The best way to get x-browser consistency is to use a bullet BG image on the anchor with left padding.
However it can be done with CSS by setting the anchor as display:list-item to get the bullet there on all browsers. You will not get consistent positioning of the bullet though. IE8 will give extra space at the left.
<!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" xml:lang="en">
<head>
<title>Lists 5</title>
<style type="text/css" media="all">
body {
font: 1em arial, helvetica, sans-serif;
}
ul {
overflow:hidden;
margin:0;
padding:0;
border:2px solid #000;
list-style:none;
}
li {
float:left;
}
li a {
display:list-item;
padding:1px 4px;
list-style-type:disc;
list-style-position:inside;
background:#CCC;
border:dotted #000;
border-width:2px 2px 2px 0;
text-decoration:none;
color:#000;
}
li a:hover {
background:#F00;
color:#FFF;
}
</style>
</head>
<body>
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</body>
</html>
hi, many thanks for this. I tested on IE 7 and it looks good!
thanks so much!