IE Bug on CSS Property: list-style float left

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

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.

hi, many thanks for this. I tested on IE 7 and it looks good!
thanks so much! :smiley: