tags:

views:

1130

answers:

5

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?

+3  A: 

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.

Aron Rotteveel
+1  A: 

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).

Bobby Jack
+1  A: 

Hey All,

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.

Helping Others
A: 

I've got the same problem. And

overlow:hidden;

really works! Thanks man!

alec
A: 

I was having the same issue with my CMS and overlow:hidden; worked a treat!

Thanks guys!

justin