problem with background-position in floated element

Discussion in 'CSS' started by null_device, Mar 15, 2009.

  1. #1
    I'm trying to style a list of links so that there can be an image above the link text (to indicate the active link).

    <ul>
      <li style="float:left;background: #000000 url(images/link-arrow.gif) no-repeat left top;padding-top:22px;">
        <a href="#" style="background: #ff0000;display:block;">Some Link</a>
      </li>
    </ul>
    Code (markup):
    This displays as I expected: [​IMG]

    However, I want the arrow image centered above the link text, not justified to the left edge. When I change the position to anything but "top left," the image is not visible. I suspect this has something to do with the float property, but I'm not really sure. Can someone explain why this is? (Note there are no other elements or styling on this page, it was made purely to test this out, so nothing else is interfering).
     
    null_device, Mar 15, 2009 IP
  2. DREAM SIZE

    DREAM SIZE Active Member

    Messages:
    103
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    51
    #2
    What happens when you do top center? Is it still hidden somewhere? If so, maybe try adding a width then using top center. That will for sure place it in the middle.

    If I was you, I might just add a margin-left to the arrow to center it myself. This might not be a 'proper fix', but it's a fix that would validate. ;)
     
    DREAM SIZE, Mar 16, 2009 IP
  3. null_device

    null_device Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    The problem turned out to be that I hadn't cropped my .gif image of the arrow, so there was a large area of transparent pixels from the surrounding canvas, and this extra invisible beef was skewing things :D

    Positioning works as I'd expect it to now that the image is actually the correct size, thank you for your reply though!
     
    null_device, Mar 16, 2009 IP