From: Ingo Chao <[EMAIL PROTECTED]>
Date: Tue, 21 Jun 2005 19:20:41 +0200
>Christian Heilmann schrieb:
>> 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/
>
>Hello Christian,
>I don't think there is a good pure CSS method to workaround that IE bug.
>
>See today's test case for a bug description and a (sort of a) workaround:
>
>http://www.satzansatz.de/cssd/wrappinglinkbg.html
Christian, I basically agree with Ingo's findings on his test page. The image
is rendered, but it can't be seen because of its location.
If the image is allowed to repeat, it's pretty clear to see that when the line
(link) wraps, IE expands (?) the box/line-box it believes to exist *for the
placement of the image* all the way to the left edge of the paragraph. It will
not show the line-box actually extending to cover that entire area (based on
tests with background and/or borders) but the now repeated image will start
from the left-top corner of the entire rectangular block that can be created
from the wrapped link (basically the paragraph)..
Repeat-x similarly will allow the image to show, but the positioning is still
taken from the left-top corner of the rectangle you can scribe around the
entire wrapped link. You can see this by setting repeat-y, as then the images
will repeat over the lower portion of the wrapped link but not appear (again)
for the upper porition. Returning to {background-repeat: repeat;}, if
additional text is added to the link so that its wrapped portion exceeds the
non-link text in the paragraph, it again appears that IE considers the area
necessary for background image to display to be a rectangle. Very annoying is
this browser...
I didn't try, but could you place the image inside the link just as an image? I
realize that this likely creates alignment problems cross-browser, but it might
be a solution, albeit not exactly a CSS one. I'm therefore agreeing with Ingo
that there's probably no good CSS solution.
Your little DOM script works nicely...
~holly
______________________________________________________________________
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/
