CSS background-image not in right place

[may1hem]

Hi, I read on a Web site how to put a little picture next to certain links, using CSS.

It works fine except when the link wraps onto the next line. In this case the picture tries to display itself at the end of the top line, and not at the end of the wrapped line, as it should.

Here is the code:
----------------------
a.offsite {
padding-right: 10px;
padding-bottom: 0px;
background-image: url(aoutside.gif);
background-repeat: repeat-y;
background-position: right;
}
----------------------

Any ideas how to fix this so that when the link text is wrapped onto the next line then the picture appears on the bottom line, to the right of the link text?

Thx,
May

 

[philote]

Perhaps

background-position: right bottom

Kevin
A+, Network+, MCP

 

[may1hem]

Hi Kevin, thanks for the suggestion. I tried it but it doesn't work =o(

Any other ideas?

Thx,
May

 

[philote]

Maybe wrap the link in a <div>, then apply the background to the div and don't repeat it:

div.offsite{
    background-image: url(aoutside.gif);
    background-repeat: no-repeat;
    background-position: right bottom;
}
div.offsite a{
    padding-right: 10px;
    padding-bottom: 0px;
}

Kevin
A+, Network+, MCP

 

[may1hem]

Hi Kevin, thx again but it didn't fix it. I put your code in the CSS file and in the HTML file I put <div> and </div> around my link but this didn't change how it displays.

I'm still scouring the Web for ideas.

Any other thoughts?

Thx,
May

 

[Artanius]

Might help if you post the addy so we can see what you are talking about specifically

 

[philote]

Put <div class=&quot;offsite&quot;> and </div> around your link with the styles I posted above. Worked for me, but may not be the best solution.

Kevin
A+, Network+, MCP