SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Font-size shrinking background images

    Whenever I specify the font size on my unordered list to be smaller, it shrinks the background images as well. How do I keep the background images from shrkinking with the font size? It works fine if I place a span around the text, but I'm looking for any other suggestions, thanks.
    Here's the CSS:
    Code CSS:
    .example {
    height: 3em;
    font-size: 10px;
    }
     
    .example li {
    display: block;
    height: 3em;
    float: left;
    text-align: center;
    line-height: 3em;
    margin-right: 10px;
    background: url("image.gif")0 50% no-repeat;
    }

    Here's the HTML:
    Code HTML4Strict:
    <ul class="details">
        <li>List Item 1</li>
        <li>List Item 2</li>      
    </ul>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My first question is why is there a </span> tag in there. My second one is why haven't you set a width on the list items?

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I understand the question. The em-length is changing with the element's font-size. If the font-size is changed inside a span it does not affect the parent font-size.

    So the answer maybe is to use a fixed length instead?

    (There need to be a space between the bg-url and left position 0.)
    Happy ADD/ADHD with Asperger's


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •