CSS Background image quirck with IE

[Illusio]

I am using CSS to make a small image appear at the end of anchor links on my site. It is working fine in IE, but when the link becomes a two line link, the image gets messed up in IE (works fine in FF). Here is a sample link:

Website

I'm referencing the motivational posters link mid-way down the page (there is a red box over the link that should be at the end of the line). If you look at it in Firefox it works fine. Here is the code that's being used:

.promoLinkHolder a:link, .promoLinkHolder a:active, .promoLinkHolder a:visited, .promoLinkHolder a:hover{
background:url(/images/en_US/global/globalgraphics/promolinkholderarrow_bg.gif) no-repeat right 2px;
padding-right:15px;
color:#000;
text-decoration:none;
font-size:11px;
font-weight:bold;
font-family:Helvetica, Arial, sans-serif;
}


Any suggestions?

 

[txrandom]

Haven't tested anything, but try adding bottom to the background as in "bottom right".

 

[Illusio]

Originally posted by: txrandom
Haven't tested anything, but try adding bottom to the background as in "bottom right".

doesn't seem to do anything.

 

[skrilla]

What about if you add float:left; to your CSS?

You may have to do a div class="clear" after it, or clear the link whatever way works best for you.

 

[txrandom]

I looked a little closer at it. The links with two lines are using different styles (overwritten) than the ones with single lines. It looks like the ones with more than two lines are positioning the background manually.

 

[skrilla]

The links have the same style applied to them no matter if they are 1 or 2 lines. I don't think the CSS is going to distinguish multiple lines. The fact that it is an inline element makes it a bit tricky.

Adding a float: left and adjusting the background position will fix it:

.promoLinkHolder a:link, .promoLinkHolder a:active, .promoLinkHolder a:visited, .promoLinkHolder a:hover{
background:url(/images/en_US/global/globalgraphics/promolinkholderarrow_bg.gif) no-repeat bottom right;
padding-right:15px;
color:#000;
text-decoration:none;
font-size:11px;
font-weight:bold;
font-family:Helvetica, Arial, sans-serif;
float:left;
}

 

[txrandom]

skrilla, links with multiple lines have their CSS overwritten. Use Firebug to confirm it. CSS isn't determining between multiple lines, but something server side or some Javascript is.

 

[Illusio]

The Float left got things working. Thanks!