182173 - a:hover background color style with transparent GIFs does not colors the entire image

Status: RESOLVED INVALID

(Core Graveyard :: Image: Painting, defect)

Description

[Shlomi Fish]

User-Agent:       Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.2b) Gecko/20021016
Build Identifier: Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.2b) Gecko/20021016

If a page has an a:hover style that specifies a different background color and 
it has an anchor that uses a transparent GIF, then the GIF is only partially
colored by the background color. In Internet Explorer 5 the entire background of
the image is converted to the background color.

Reproducible: Always

Steps to Reproduce:
1. Go to the specified URL (http://t2.technion.ac.il/~shlomif/me/)
2. Place the cursor above the "Back to my Homepage" image at the bottom.

Actual Results:  
Only a small part of the image (at the bottom was colored)

Expected Results:  
Color the entire image.

Comment 1

[Niklas Dougherty]

That's right. The hover happens on the line containing the anchor; it doesn't
extend to the image overflow. You may want to use div.someclass:hover
{backgroundcolor: lime} if you want the entire content area to change color.

Comment 2

[Shlomi Fish]

Hi Niklas!

The question is: what does the standard has to say about it. I believe the
entire image is contained within the anchor (look at the code:
<a href="..." ><img ...></a>) so it should highlight it all. But this bug is
not very serious in any case.

Comment 3

[Niklas Dougherty]

"10.6.1 Inline, non-replaced elements

If 'top' or 'bottom' are 'auto', their computed value is 0.

The 'height' property doesn't apply. The height of the content area should be
based on the font, but this specification does not specify how. A UA may, e.g.,
use the em-box or the maximum ascender and descender of the font. (The latter
would ensure that glyphs with parts above or below the em-box still fall within
the content area, but leads to differently sized boxes for different fonts.)

Note: level 3 of CSS will probably include a property to select which measure of
the font is used for the content height.

The vertical padding, border and margin of an inline, non-replaced box start at
the top and bottom of the content area, not the 'line-height'. But only the
'line-height' is used to compute the height of the line box."

Thus what is highlighted when hovering over that image is the actual line box,
which has a height depending on your set font-size and line-height (default
120%). The image just overflows and doesn't add to the line box height.

Since you want the entire area to highlight, you need to specify this explicitly
with a class applied to either the div or the image, not the anchor (which
belongs to the line box).

Comment 4

[Boris Zbarsky [:bzbarsky]]

Niklas is correct.  Per CSS, the height of the <a> is the line-height and is
independent of the height of the image in it.  IE is just incorrect here.

Comment 5

[Shlomi Fish]

OK, thanks. Guess I'll have to tweak the CSS styles in the document some more to achieve this effect. Sorry for bothering you.  It turns out IE is not fully standard compliant either. 

Comment 6

[Michael O.]

Niklas and Boris, I disagree with your interpretation of the CSS spec in this
case. The image has intrinsic dimensions that affect the height of the line-box,
and since it is contained by the anchor, also affects the dimensions of the
anchor. In this case, the line-box should be the height of the image.

From CSS level 1 spec, section 4.4
(http://www.w3.org/TR/REC-CSS1#the-height-of-lines):
"Replaced elements (e.g. images) on the line can make the line-box bigger, if
the top of the replaced element (i.e., including all of its padding, border and
margin) is above the tallest text section, or if the bottom is below the lowest."

Comment 7

[Boris Zbarsky [:bzbarsky]]

Michael, the whole point is that the line-box has nothing to do with the
background of the <a>.  The <a>'s height is dependent on the font-size, and can
be shorter than the line box (and is, in this case).