background-image positioning problem in Firefox on the MAC

[carsten888]

I'm stuck with a normal 'read more' link's background-image (an arrow) in firefox on the mac.

HTML:
<span class="readon"><a href="">read more</a></span>

CSS:
span.readon{
background: url(../images/pijltje_readon.gif) no-repeat 4.8em 0.49em;
padding: 0;
}

span.readon a:link, span.readon a:visited{
color: #E95D0F;
text-decoration: none;
padding-right: 3em;
}

span.readon a:active, span.readon a:hover{
text-decoration: underline;
}

shows correct in all browsers except for my flippin' designers Firefox on the MAC.

[swa66]

I've seen vertical positioning issues if you do not have

background-attachment: fixed;

in firefox, might be a bug, or not, I'm not all that sure which way is right.

[carsten888]

I fixed it with javascript. Far from the ideal way to do this, but I ran out of ideas. I will test that background-fixed option, after my deadline :-)#

var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf('mozilla')!=-1 && agt.indexOf("gecko")!=-1 && agt.indexOf("safari")==-1 && agt.indexOf("mac") != -1){ 
 document.write('<style type="text/css">.readon{background-position: right 0.22em;}</style>'); 
}