Problem


<div style="width: 30px; height: 30px; overflow: hidden; background: url(test.png) right top; border: 1px solid red;">
  abcdefhjklmnopqrstuvwxyzabcdefhjklmnopqrstuvwxyz
</div>
abcdefhjklmnopqrstuvwxyzabcdefhjklmnopqrstuvwxyz

If you view this div in IE6, you will not see the background. You can see the background in other browsers I tested.

Why can't you see the background image in IE6

In IE6, background image is aligned right, but to the right edge of the content inside the div. Since the content is wider than the div element and overflowed content is hidden, background image is hidden too.

Solution

I came across this problem when I was trying to the the toolbar icons for web editor. I wanted active icons to have different background than the inactive ones. The solution for me was easy because I knew exact size of the icon and the size of background image. I simply used


background-position: -35px top;

where -35px = width of element - width of background-image.

Standard

CSS standard says abou background-position value :

right
Equivalent to '100%' for the horizontal position.
<percentage>
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.

and padding box is :

content edge or inner edge
The content edge surrounds the rectangle given by the width and height of the box, which often depend on the element's rendered content. The four content edges define the box's content box.
padding edge
The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The four padding edges define the box's padding box.

So IE6 does not conform to W3 standard.


Discussion:
Add post