44102 - link hover bounding size determined by font size

Status: VERIFIED INVALID

(Core :: Layout, defect, P3)

Description

[deneen]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; WinNT4.0; en-US; m17) Gecko/20000627
BuildID:    2000062720

If you look at the sample page, the hover should (at least I think) be the size
of the image.  It appears that mozilla is determining the size of the hover
based on font size, rather than the largest object inside the link.

Reproducible: Always
Steps to Reproduce:
1.go to the page.
2.put your mouse over the image
3.observe

Actual Results:  the background color and border color set in the hover only
show around where the text would be if text was in the link.

Expected Results:  set the background color/border color around the entire
image.  (This is the area you can click on, i think it should be "hovered")

I think this is different than the other bug regarding hovers.  (That was about
parent elements)

Comment 1

[Henri Sivonen (:hsivonen)]

Setting the background-color of the img to inherit helps.

See testcase for bug 36963 at http://www.pp.htv.fi/hsivone1/css-test/bitmapstyle.html

I am not sure if this is bug as per CSS spec. IE 5 for Mac doesn't require 
background-color: inherit;, but it might be a bug in IE. 

Comment 2

[Pierre Saslawsky]

It isn't a problem with "backgroung-color:inherit". It is a Layout bug where the 
bounding box is not calculated properly. The width is correct but not the height.

I'm going to attach a slightly modified testcase that makes it more obvious.
Reassigned to Layout/waterson. I think I saw a similar bug a few months ago (good 
width / bad height for an element containing an image).

Comment 3

[Pierre Saslawsky]

Attachment: slightly modified testcase

Comment 4

[Henri Sivonen (:hsivonen)]

If I parsed the spec correctly, the <a> element is an inline non-replaced whose box height 
is given by the line-height property, which is unaffected by the height if the image.
http://www.w3.org/TR/REC-CSS2/visudet.html#q15

One thing to consider is putting 
a > img{
   background-color: inherit;
}
in the UA stylesheet. However, that would make authors write pages that depend on a 
particular UA stylesheet.

CCing py8ieh=[e-mail]

Comment 5

[deneen]

I understand how you can use the background-color: inherit; thing, but what if 
I wanted to have background and a border?

border: inherit; almost gets it, but I get the border around the text bounding 
box and the image.

I understand that I could place the hover on the image, but that will not work 
in mozilla and ie.

I'm not sure I understand why the spec says to calculate the bounding box by 
the line height, if the image height is the area the user can click on in this 
case.

Comment 6

[Chris Waterson]

cc'ing dbaron, as well.

Comment 7

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

This is not a bug, despite Pierre's desire for the CSS spec to be different from 
how it is.  See 
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html , section 
"Minor Typographical Errors", item "Section 10.6.1".

Perhaps there should be a way to do this, but it's not in CSS now.  CSS can't do 
everything.

Comment 8

[Chris Waterson]

INVALID?

Comment 9

[Pierre Saslawsky]

Not. Reopening, explanations are coming.

Comment 10

[Pierre Saslawsky]

A solution would be to support 'display:inline-block' in Layout (it doesn't seem 
to work right now) and declare the A element as inline-block in quirks.css.

Marking 4xp anyhow.

Comment 11

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

NN 4.x didn't support hover.  Do we really have to emulate IE's complicated 
behavior?  Supporting inline-block (which isn't in any CSS rec. yet) is not 
trivial.  Furthermore, future revisions of CSS may describe inline formatting in 
more detail, and be able to do this.

Comment 12

[Pierre Saslawsky]

I marked '4xp' too quickly. The testcase I wrote doesn't work in WinIE5, only in 
MacIE5 and the results in Nav4x are too buggy to expect to do anything. For 
instance, if you set:
   a.graphic { border: 1px solid transparent; background-color: pink; }
both the image and the text get a background-color and they are both surrounded 
with a single border as if 'A' was inline-block. But then, if you remove the 
border, as in:
   a.graphic { background-color: pink; }
only the text gets the background-color and it gets it within a frame that has 
the image height...

Marking Invalid again.

Comment 13

[Hixie (not reading bugmail)]

Hmm, this is the second such bug I've come across today... VERIFIED.