How Can I Have Floated List Items Display Their Bullet In Ie7?

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:

Solution 1:

Further to my comment (to the question), a demo is posted over at JSBin.

With the following CSS seems to achieve your aims:

ulli {
float: left;
list-style-position: inside;
margin: 0001em;
}

Solution 2:

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:

ulli {
    width: 30%; /* or whatever; copying your example */float: left;
}

ullia, ullispan {
    display: list-item;
}

HTML:

<ul><li><ahref="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:

.floatedli { width: 30%; float: left; }
.floatedlia, .floatedlispan { display: list-item; }

I hope this helps (if not the original questioner, this being so old, then someone, sometime).

Solution 3:

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! ;)

Share