Missing Bullet Points

From CSS Discuss

When you have a floated left element (such as an image) and then have a list wrapping round it, you'll find that the bullet points have a horrible tendency to disappear or overprint on the image, depending on your web browser.

Unfortunately there isn't much you can do about it. Here's a few links to list padding issues, the disappearing bullet issue and others:

• netscape devedge - consistent list indentation - general review of list box model
• List Display Problems In Explorer For Windows - John and Holly,s article discussing lists, what Explorer does to lists, and what can be done about it.

Finally, here's Craig Saila's comment on the css-discuss list:

Dunstan Orchard wrote: The list bullet points seem to be hidden underneath the left-floating image, giving the list the plain appearance of a paragraph of text. Increasing the list's margin or padding does nothing to help. Any ideas what I can do to stop this?

My ugly fix has been to increase the margin on the *image*. I usually create a class called "gutter" and give it a margin right of about 20px (or 2em) which seems to work under most text sizes. This fixed the problem with an image using float or align left hiding the bullets. -- Cheers, Craig Saila

---

Is this a Browser Bug or a Css Bug?

---

I found the following CSS eliminated the problem in Gecko-based browsers. Does nothing at all for IE, though:

UL, OL {
	margin: 0;
	padding: 0;
	margin-left: 20px;
}
LI {
	margin-left: 20px;
}

Consider using:

UL, OL {
   list-style-position: inside;
}