I've got a list with floated list items which should use the standard bullet. But in IE7 only, these bullets don't appear:
Here is the all the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css">
/*ul { overflow: hidden; margin: 1em; padding: 1em; } */
ul li
{ width: 30%;
float: left;
border: dashed red 1px;
/* list-style-position: outside; list-style-type: disc; margin-left: 1em; padding: 1em; zoom: 1; */
}
</style>
</head>
<body>
<ul>
<li>Lorem ipsum dolor sit </li>
<li>consectetuer adipiscing elit</li>
<li>Etiam sapien neque</li>
<li>dictum at</li>
<li>bibendum ut</li>
<li>posuere quis</li>
</ul>
</body>
</html>
The commented-out CSS are rules that I tried, but which didn't make the bullets appear.
When I remove the float: left; declaration, the bullets do appear in IE7.
How can I get floated lis with bullets to display in IE7?
Further to my comment (to the question), a demo is posted over at JSBin.
With the following CSS seems to achieve your aims:
ul li {
float: left;
list-style-position: inside;
margin: 0 0 0 1em;
}
I'm seeing the bullets disappear in Safari on MacOS, as well... I found a page that, in one of the comments, gave me a solution that worked for me: Putting a display: list-item; style onto a or span tags when they occur inside an li, like this:
CSS:
ul li {
width: 30%; /* or whatever; copying your example */
float: left;
}
ul li a, ul li span {
display: list-item;
}
HTML:
<ul>
<li><a href="some/thing">link to something</a></li>
<li><span>not a link</span></li>
<li> ... [oops, no bullet!] </li>
</ul>
Note that in the case of an a tag, the bullet will be part of the link (and colored as one, etc.). With span (and removing the ul li a styling), that should be avoidable.
Sadly, this does mean changing your markup... but at least it's hopefully not an entirely unreasonable type of change.
Also of note: this works with ol lists, too, with an interesting caveat: If you stop floating them (and thus they get their normal numbering back), you end up with each item numbered twice! So, be careful of doing this to all li a or li span combinations; perhaps you'd want to use a class for lists that would be treated this way, and only apply these stylings to that. For example, one might change the above to:
.floated li { width: 30%; float: left; }
.floated li a, .floated li span { display: list-item; }
I hope this helps (if not the original questioner, this being so old, then someone, sometime).
I had to use a workaround to get the bullets to display in IE7. I created an image of the bullet, and set it as the background-image for the LIs, along with some extra padding.
I would be happy to accept another answer though! ;)
