Absolute Orange Web development, only better

Written on Mon, 27 Jul 2009
By Amy Varga

Amy Varga looks at the options for implementing block lists using bespoke list images

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

Comments

At Tue 9th Mar 2010 04:55:48, Wharma-online (mariker.kennyberg@gmail.com) said:
lo que yo queria, gracias