CSS- Using Float With List Item Bullets in I.E 6/7
Note to self and everyone else having a breakdown over this issue, YOU CANNOT float a list in I.E 6 or 7 and have the bullets display. It took me way too long to realise that.
I have searched high and low for a legitimate way of making it work (without using JavaScript), but apparently it cannot be done.
For example, suppose I want the following effect:
The code to achieve the above effect is:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <html>
<head>
<style>
li{
list-style-type:disc;
float:left;
margin:0 0 0 20px;
}
</style>
</head>
<body>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ul>
</body>
</html> |
However, in I.E 6/7 it looks like the following:
The bullets DO NOT show! I genuinely wasted hours trying to get the code to work. After scouring through what felt like hundreds of forums, I couldn’t find anyone that was able to get the code to work in I.E 6/7.
The Solution
Fortunately, there is a solution. It’s not a hack, it’s just a different way of achieving the same visual effect. Instead of using the “list-style-type” property, you can use the “background” property, and it will give the exact same effect, but it works in the most commonly used browsers: I.E 6/7/8, Safari, Opera, Firefox and Crome (that’s all I tested).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html>
<head>
<style>
li{
background:url("images/circle.gif") no-repeat left center;
float:left;
margin:0 0 0 20px;
padding:0 0 0 20px;
}
</style>
</head>
<body>
<ul>
<li>List 2</li>
<li>List 2</li>
<li>List 3</li>
<li>List 4</li>
<li>List 5</li>
<li>List 6</li>
</ul>
</body>
</html> |
Notice the “background” property. The image it is calling is basically the “circle”. The bullet can be anything you want it to be – just create it as an image.
As far as I know, that literally is the ONLY solid way of achieving a stable way of producing item bullets in the majority of browsers.
Has anyone else been pulling their hair out while trying to resolve this bug?
brightcherry.co.uk
hehe… tried to find a solution for IE7 and the list bullets issue as well. Would be nice to skip another image call for just the bullets… stick to the background image
Here’s a thought: use • instead of background image.
Because HTML is accepted in comments, my example maybe isn’t clear enough – this character (•) is created by writing • in HTML code.