By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,159 Members | 1,941 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,159 IT Pros & Developers. It's quick & easy.

inline background image in IE

P: 40
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
Share this Question
Share on Google+
5 Replies


drhowarddrfine
Expert 5K+
P: 7,435
Hm. Works for me. .
Aug 9 '07 #2

P: 40
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

P: 40
I'm noticing some positioning things ... now it's showing up, just not in the right place :-)
Aug 10 '07 #4

P: 40
I got her working ... needed an IE hack though

http://granthansen.com/bg_test.html

Thanks for your help!
Aug 10 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
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

Post your reply

Sign in to post your reply or Sign up for a free account.