Skip to main content

Forums

This topic contains 7 replies, has 0 voices, and was last updated by  ameskc00 9 years, 8 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #25382

    ameskc00
    Member

    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!

    #60397

    apostrophe
    Member

    Give the background some left padding.

    #60390

    ameskc00
    Member
    "apostrophe" wrote:
    Give the background some left padding.

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

    #60405

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

    ameskc00
    Member

    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!

    #60426

    apostrophe
    Member

    Try this

    Code:
    ol { list-style-position:inside; }
    #60427

    ameskc00
    Member
    "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?

    #60431

    apostrophe
    Member
    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.

icon-link icon-logo-star icon-search icon-star