February 12th, 2004, 03:24 PM
CSS background-image with inline elements
I'm trying to achieve an effect using a background image with an inline element. Specifically, I have certain hyperlinks that I want to display a graphical arrow to the right of. Essentially, it looks something like:
Hyperlinked text here >>>
Where ">>>" is actually a small graphic approximately 20 pixels wide.
I don't want to place the image inline, because it's a visual effect and users don't need to "interact" with it. And it's also tied in with the style of the site, so controlling it through CSS is very attractive.
I figured out that if I add about 20 pixels of padding to the right of the ANCHOR element, I can use the graphic as a CSS background image. Looks good in IE5+ and Mozilla-based browsers (not concerned with NS4), as long as the ANCHOR text is on one line.
Problem is, when the text of the ANCHOR element breaks across two or more lines, I lose the image in IE. Of course, Mozilla-based browsers handle it perfectly -- it's just Microsoft's little problem child that's giving me fits.
Anyone else have any luck using a background image on an inline element that spans two or more lines? I can't find any documented hacks or the like to help me out.
Any help is greatly appreciated!