Topic: Styling an anchor tag with background image

So I thought I was doing well, looks well in IE 7, does not look well in FireFox. I have a bacground arrow that is set to display on the bottom right of a linked element with class of more, the "more" link. The html code is:

<a href="testimonials.asp" class="more">more</a>

The CSS:

a.more
{
padding-left:3px;
width:45px;
display:inline-block;
background:url(/images/arrow_2.jpg) right bottom;
background-repeat:no-repeat;
line-height:14px;
vertical-align:bottom;
overflow:hidden;
}
a.more:hover
{
color:#FF0109;
}


The width is ignored in FireFox so the bacground arrow appears half way into my text instead of on the right of my text.
Ideas?

CSS can be frustrating : )

Karl..

<edit>clean up css from me testing it</edit>

(Edited by Karl on 02-10-2007 20:33)

If you're talking about http://ultimateimage.us/default.asp.28907.htm, the simplest way would probably be adding display: -moz-inline-box; to .more's rule.

This is of course proprietary and super lame. There's probably some way to do it with display: block; or display: table-cell; or something.

(Edited by reisio on 02-10-2007 21:49)

Ok, that works (kinda). Text is not wrapping now, it is all overlapped. ..and what is the IE *html hack that you can add to the css so I can setup the display:inline-block for IE rendering?

No need.