Grow your CSS skills. Land your dream job.

Numbered List Background Image

  • # July 8, 2009 at 3:07 pm

    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!

    # July 8, 2009 at 3:15 pm

    Give the background some left padding.

    # July 8, 2009 at 4:35 pm
    "apostrophe" wrote:
    Give the background some left padding.

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

    # July 8, 2009 at 10:37 pm
    Code:
    ol li {background:url(http://stage2.mmgworldwide.com/html_conversion/gha/site09/images/disc.gif) no-repeat 0 0;
    padding-left: somepx;}
    # July 9, 2009 at 9:35 am

    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!

    # July 9, 2009 at 10:02 am

    Try this

    Code:
    ol { list-style-position:inside; }
    # July 9, 2009 at 12:30 pm
    "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?

    # July 9, 2009 at 1:58 pm
    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.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".