Numbered List Background Image

[ameskc00]

I’ve spent way too long on this, so I thought I’d see if anyone has ever styled the numbers in a numbered list with background images successfully. I surprisingly have it working in IE 6 and 7, but Firefox 3 places the image behind the content instead of the number. If I use a negative background image position, FF hides the image.

Here is my CSS:

Code:

body {font-size:11px; font-family:Arial, Helvetica, sans-serif;}
ol {color:#C00; margin:0; padding: 0;}
ol li {background:url(http://stage2.mmgworldwide.com/html_conversion/gha/site09/images/disc.gif) no-repeat 0 1px; margin:10px 35px 10px 0;}
ol li p {color:#4b4b4b; margin:0 0 10px 25px;}

Here is the HTML:

Code:

1. Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Ut dapibus erat non nunc. Praesent vitae sem.

2. Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Ut dapibus erat non nunc. Praesent vitae sem.

3. Lorem ipsum dolor sit amet, consectetur adipiscing
   elit. Ut dapibus erat non nunc. Praesent vitae sem.

I’ll change the numbers to white instead of red once (IF) I get it working. Thanks!

[apostrophe]

Give the background some left padding.

[ameskc00]

"apostrophe" wrote:

Give the background some left padding.

Not sure I know what you mean. Could you please give an example?

[apostrophe]

Code:

ol li {background:url(http://stage2.mmgworldwide.com/html_conversion/gha/site09/images/disc.gif) no-repeat 0 0;
padding-left: somepx;}

[ameskc00]

Unfortunately that only pads the content. The numbers remain to the left of the image in FF. Here’s a screenshot: [img]http://stage2.mmgworldwide.com/HTML_Conversion/GHA/site09/images/test_list.gif[/img]
I think I may just use an unordered list, but I am still curious if anyone knows a solution for the numbered list. Thanks!

[apostrophe]

Try this

Code:

ol { list-style-position:inside; }

[ameskc00]

"apostrophe" wrote:

Try this

Code:

ol { list-style-position:inside; }

Ugh, yeah that seemed to make things worse when I tried. FF has the numbers over the images but the content is pushed down. IE renders the numbers inside content (as expected) rather than over the images. Were you able to get it to line up properly?

[apostrophe]

Quote:

Were you able to get it to line up properly?

As you haven’t provided a link I’m just using (barely) educated guesswork.

[Author]

Posts