background images lost on multi line inline links

The tiling and positioning of the background-image on inline elements is undefined in this specification

(CSS 2.1).

Description

IE6, IE7: IE shows no background images at left top when the link wraps. Size the window horizontally to see.

Lorem Ipsum Dolor Sit Amet metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem Ipsum Dolor sit amet elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, Sit Amet Sagittis est metus ut erat. Maecenas sollicitudin metus.

Interpretation

But where is the background image? In this example, left center, together with padding-top and background-color is used to illustrate.

Lorem Ipsum Dolor Sit Amet metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat. Maecenas sollicitudin. Lorem Ipsum Dolor sit amet elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, Sit Amet Sagittis est metus ut erat. Maecenas sollicitudin metus.

To me, the values left, right, top, bottom, center are interpreted as if the wrapped link spans a rectangular block, and as if the values define the offset relatively to the origin of this rectangle. The figure below shows a coordinates rectangle build by 0, 0 and 100%, 100% of the inline link's visual rendering coordinates, a bounding box.

bounding box

If this rectangle was used to calculate the position of the background-image, the image could be physically placed outside of the wrapped link's inline boxes.

bounding box with estimated position of the bg-img outside of the inline-box

That might be an explanation why left top is not seen, and left center shows only a small part of the image, if at all, depending on the image's visual height.

CSS3 defines the positioning of the background-image on inline elements

The CSS3 Backgrounds and Borders Module defines the background positioning on inline elements with the 'background-break' property.

Looks like as if IE "follows" the 'bounding-box' model, while the other browsers follow the 'continuous' model. In CSS3, the 'continuous' model would be the initial value for the 'background-break' property.

Workarounds and discussion

In the css-d thread opened by Christian Heilmann, he presented a very nice DOM script. His question was if there is a pure CSS way to accomplish this.

Holly Bergevin noted that by inserting a <img> inside the link, this likely creates alignment problems cross-browser. We agreed that there's probably no good CSS solution.

We can hide the background images from IE. Or we can put a stop to the wrapping of the link with white-space: nowrap. Another method to prevent the wrapping is to trigger “haslayout” on this inline element: via zoom: 1 in standards mode; alternatively height: 1em in quirks mode (thanks to Eike Jordan). The link will more behave like inline-block.

Francky Kleyneman describes an alternative by using an additional element inside the link as a hook for the background image: CSS workaround for external link with small icon.

Created, and last updated:
June 21, 2005
November 22, 2007
Author:
Ingo Chao
Contact:
spam.layout@satzansatz.de