|
Floating the link left as well as display:block
should make the image sit at the end of the text, as opposed to spaning the
width of the page. This can cause problems in a few older browsers such as
Netscape 6, as once you float something left it is no longer a block
element.
Hope that makes sense.
----- Original Message -----
Sent: Monday, August 15, 2005 5:32
PM
Subject: [WSG] I'm on a question roll....
background images on links
We are using a background image on links to signify they are
external. The
image sits on the right side of the link using background:
url() 100% 0;
All is fine in firefox, but in IE the icon overlaps or
sits at the top when
the text wraps to a second line. Is there a way
to make the background
image follow the text inside a link rather than
looking at the link as a
block?
I've tried display: inline-block and
that made the spacing better, but
didn't fix the issue.
Here's an
example
Good link:
| Google Virtual |
| World
(icon) |
Bad link:
| Google Virtua(icon) | The icon
sits at the top and doesn't
|
World
| flow with the text
Has anyone found a way to fix this? I don't
want to go back to inline images
and our standard is to have the icon on
the right and not the left.
Otherwise, I would have placed it on the left
and it would have been a
cake-walk.
P.S. sorry about an earlier html
formatted email, I try to send them in
plain
text.
Thanks
Ted Drake
www.tdrake.net
******************************************************
The
discussion list for http://webstandardsgroup.org/
See
http://webstandardsgroup.org/mail/guidelines.cfm
for
some hints on posting to the list & getting
help
******************************************************
|
