Topic: Styling an anchor tag with background image (Page 1 of 1) Pages that link to <a href="https://ozoneasylum.com/backlink?for=28909" title="Pages that link to Topic: Styling an anchor tag with background image (Page 1 of 1)" rel="nofollow" >Topic: Styling an anchor tag with background image <span class="small">(Page 1 of 1)</span>\

 
Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 02-10-2007 20:31

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)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 02-10-2007 21:42

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)

Karl
Bipolar (III) Inmate

From: Phoenix
Insane since: Jul 2001

posted posted 02-11-2007 01:47

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?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

posted posted 02-11-2007 02:33

No need.



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu