inline background image in IE

GluteHam

OK, so here's a new one for the group...

I have the two following classes:

.ratings_link {
display: block;
background: #ffeec1 url(image.gif) no-repeat center right;
font: bold Arial, Helvetica, sans-serif;
color: #176fcc;
text-decoration: none;
margin-top: 3px;
}

.ratings_link_inline {
background: #ffeec1 url(image.gif) no-repeat center right;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #176fcc;
text-decoration: none;
padding: 1px 20px 1px 1px;
}

The first class works just fine as it displays block style. The background image is aligned right, with no repeat. Wonderful.

Now, for the second, I need this to be an inline style. Everything seems to work fine but the background image does not show in IE. I tried inserting display:inline in the class, but that does nothing. Nor does putting it inside a div. Simply, the code is:

1. <a href="link.htm" class="ratings_link">link 1</a>
2. <a href="link.htm" class="ratings_link_inline">link 1</a>

Any suggestions? Thanks.

Aug 9 '07 #1

drhowarddrfine

Hm. Works for me. .

Aug 9 '07 #2

GluteHam

Really?? I've checked in both IE 6 and 7.

Please look at it on an actual page:
http://granthansen.com/bg_test.html

Do you see the red square on the second style?

I found this article that explains IE doesn't handle positioning well for non-block items:

http://www.satzansatz.de/cssd/wrappinglinkbg.html

Thanks!

Aug 10 '07 #3

GluteHam

I'm noticing some positioning things ... now it's showing up, just not in the right place :-)

Aug 10 '07 #4

GluteHam

I got her working ... needed an IE hack though

http://granthansen.com/bg_test.html

Thanks for your help!

Aug 10 '07 #5

drhowarddrfine

I do not see the problem in IE6 but I do only partially see the red square in IE7. I had only checked in IE6 before. The solution is not obvious right now but I'm not really here today (out of the office).

Aug 10 '07 #6