Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post

    Link background image doesn't appear when link wraps on multiple lines

    I have a simple rule for links of the class pdf, such that they include a background image of a PDF icon.

    This works fine when the link involved is on one line, but when it wraps onto a second line, the image doesn't show up!

    Following is the CSS rule:
    Code:
    #content a.pdf {
      padding-right: 20px;
      background-position: right bottom;
      background-repeat: no-repeat;
      background-image: url(../images/icon-pdf.gif);
    }
    Attached is a screenshot of this occurrence. I've outlined the two places where the image is missing.

    Seems to me that the image should just appear at the end of the link...Am I doing something wrong?
    Attached Thumbnails Attached Thumbnails Link background image doesn't appear when link wraps on multiple lines-image1.jpg  

  • #2
    Regular Coder
    Join Date
    Aug 2004
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    see what happens if you reapeat-y or repeat-x to possibly see where the image is actually ending up, then try to change it based on that

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Changed no-repeat to repeat-x and fiddled with the positioning...

    Seems to me that a line containg a multiline link is treated as a box, where the border is all around that line of text. So positioning it, say, top left, positions the image to the top left of the box, and not the top left of the link. Similar for other positions.

    Unless there's some way around this, seems that this effect will only work on links that are on a single line...

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Weird. I looked at it in MOZ and it worked fine. IE6 didn't like it too well. I tried a couple different approches and no dice. The only thing that I can see working all around is dropping an image tag or a span with the image as the background in there.

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by harbingerOTV
    Weird. I looked at it in MOZ and it worked fine. IE6 didn't like it too well. I tried a couple different approches and no dice. The only thing that I can see working all around is dropping an image tag or a span with the image as the background in there.
    :-/

    Another IE flaw I guess...Sigh...Unfortunately, the website I am working on is for a corporate intranet, and the company is all Windows and IE6.

    I thought of just using a plain image tag, but using the CSS to style the link would be less trouble in the long run. I might have to go back to that...

    Using an empty span at the end of the link seems rather a kludge, and would be extra work each time adding a new link. And plus, it doesn't work if the span is empty.

    I'll poke around the web some more and see if I can find a solution, but at this point it seems as if using the plain img tag would be the best solution. Funny, I thought using CSS would save time, not take more!

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Victoria, BC, Canada
    Posts
    962
    Thanks
    0
    Thanked 1 Time in 1 Post
    I decided to go with the span approach; I inserted a span with class of pdf directly after the pdf link. In order for the span's background to appear, I had to give it some content, so I just inserted a non-breaking space. It works now.

    Now even if the link is on multiple lines, the following span wouldn't be, and so the image always appears.

    And typing that out is still less trouble than doing the img tag manually, with the path, dimensions, and alt attributes.


  •  

    Posting Permissions

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