Disappearing bullet points

Question

http://biochrom.fivesite.co.uk/catalogue4.asp

On the page above there is an image floated to the left. To the right of it is a list, titled "features". The list items have a background image, however, it isn't appearing. List 2 shows how the background image looks.

Does anyone know how I can make the bullets visible?

Answer 1

Your image has a float:left property. The list items are therefore rendered "behind" the image.

margin-left:200px;

on the UL element will solve your problem.

Alternatively, you can apply a float:left on your UL-element. This will make it float right to the image, but will make the following content appear on the same line. You can prevent this by clearing the UL-element, or adding element after the UL-element with...

clear:both

...applied to it.

More information about this behaviour can be found at http://www.positioniseverything.net/easyclearing.html.

Answer 2

I know this is a year old post but others may want to know...

What happens if you are using a content management system and some pages have images & some don't you wouldn't want your list items to be 200px in the content?

You can add this CSS to your UL/OL element:

overflow:hidden;

I hope that helps.

Answer 3

This thread is old indeed, but always relevant...

Another alternative solution:

display: inline-block;

Put this on the UL. It forces the entire ul to appear after the float. That way you can have a page with or without the image and it will always display correctly (checked on FF4, IE7 & 8, Chrome 11).

Answer 4

Alternatively, you could use the list-style-image property instead of background-image. I ran into this very problem the other day: the text-wrapping behaviour that floats exhibit on their 'neighbours' only applies to 'content', not background images (for example).