Absolute Orange

Lists

Written on Mon, 27th July 2009
By Amy Varga

I recently implemented some block (as opposed to inline) lists on my web page. I wanted the lists to use my own list image. There are two ways to implement this kind of list; use the CSS background-image option or the CSS list-style-image option.

Using CSS background-image

The CSS background-image option is quite popular as it allows complete control over the positioning of the list images. However, the problem I had with this option, which can be seen in the first screen grab 'List using background image', is that the list images do not float correctly against div.media. The CSS relative:position illustrates that the list images are floated left against the holding div.wrapper. I could find no way to get the list images to float correctly against div.media.

Using CSS list-style-image

By using the CSS list-style-image with list-style-position:inside, which one can see in the second screen grab 'List using list-style-image', this works correctly in Firefox i.e. the list images are floating correctly against div.media. Unfortunately however, IE does not position the list images optionally as can be seen in the third screen grab 'List using list-style-image in IE'. I've checked that my list image is a square with no white space on the left. I could find not way to position the list images correctly in IE.

Using CSS list-style-type for IE

The best alternative I could come up with for IE is to resort to list-style-type which correctly positions the list images as can be seen in the fourth screen grab, 'List using list-style-type in IE'.

Screenshots:

• 
• 
• 
• 

Comments

Make your comment

* Full name

* Email

* Comment enter your comment

* Captcha

* denotes required fields