On Jun 21, 2005, at 8:32 AM, Christian Heilmann wrote:
a friend just asked me about the following problem:
You have CMS driven texts with embedded links and you need to set a
non-repeating background image to the links (indicating external
links). They cannot access the markup to add spans, classes, IDs or
whatever.
Now, all is fine in FireFox with that:
a{
background:url(arrow-selected.gif) top left no-repeat #fff;
padding-left:1em;
}
MSIE does not render the image though when the link breaks into a
new line.
Test Case:
http://icant.co.uk/sandbox/inlinelinks/
You could try adding white-space: nowrap; to your style:
a{
background: url(arrow-selected.gif) top left no-repeat #fff;
padding-left: 1em;
white-space: nowrap;
}
Also, I think the proper way to style the background image is as
follows...
a{
background: #fff url(arrow-selected.gif) left top no-repeat;
}
...putting the hex value (#fff) for your color before the image's
url, and putting the horizontal position of the image before the
vertical position. I believe there is a bug in Netscape 6 where it
will ignore your background positions if they are not in this order?
Try this:
a{
background: #fff; url(arrow-selected.gif) 0 50% no-repeat; /* "0"
places image flush left, "50%" places it vertically centered */
padding-left: 1em;
white-space: nowrap;
}
I'm not sure, but you may not even need white-space: nowrap; if you
follow the example above. Personally, I try to avoid nowrap if at
all possible.
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
