CSS: list bullets not showing in IE 7
June 23, 2010 16:04:14 Last update: June 23, 2010 16:04:14
This is the page:
When loaded in IE7, the bullets are not showing (they displayed fine in Firefox). It turned out that IE requires minimum left padding to display the bullets when the
Add
IE displayed like this:
Expand the left padding to
IE displays the bullets normally:
<!doctype html> <html> <head> <title>UL Test</title> </head> <body> <div style="width:200px;margin:auto;clear:both;"> <ul style="list-style:disc outside none;padding:5px;margin-left:8px;"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </div> </body> </html>
When loaded in IE7, the bullets are not showing (they displayed fine in Firefox). It turned out that IE requires minimum left padding to display the bullets when the
list-style is outside.
Add
5px left padding:
<ul style="list-style:disc outside none;padding:0px;padding-left:5px;margin-left:8px;">
IE displayed like this:
Expand the left padding to
12px:
<ul style="list-style:disc outside none;padding:0px;padding-left:12px;margin-left:8px;">
IE displays the bullets normally:
