155719 - A:hover border & background settings not handled for images correctly.

Status: VERIFIED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[dylang]

With A:hover, you can do some nice looking things, such as extra highlighting on
href links (in my case, I add a border around the text link and change the
background).  However, Mozilla does not correctly apply this border attribute to
img tags which are inside A href tags.  In the case of the gaming page, you see
that the changed background and border are applied as if the image was a piece
of text, rather than a block of X by Y pixels.

This behaviour exists with 2002063021.

The following CSS + any page with an image link is the simplest test case:
a
{
        background-color: transparent; 
        border: 1px transparent;
} 

a:hover
{
        background: #ddd;
        border: 1px solid black;
}

Comment 1

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

If you want something that applies to the border or background of the image, you
need a selector that matches the image.  Our current rendering is correct, since
the box we draw is the A element's box.

Comment 2

[dylang]

I think I'll just disable it for images, since that's what I was going to do
anyways (but I thought I might report it all the same :)).

Comment 3

[dylang]

I think I'll just disable it for images, since that's what I was going to do
anyways (but I thought I might report it all the same :)).

Comment 4

[Eric A. Meyer (dead account)]

Sorry to spam on a verified bug, but there doesn't seem to be an open bug on
this issue where I can ask the question, so I'll do it here: how is an author
supposed to write styles that say, "put borders around hovered links unless they
contain images, in which case border the image but not the link" without
resorting to classes or IDs on pieces of the markup?  If we could figure that
out, I'd love to write it up as a DevEdge technote.

Comment 5

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

I don't know.

Comment 6

[Eric A. Meyer (dead account)]

So isn't that kind of a problem?  How do we address situations like the
reporter's, where the styles he created lead to counter-intuitive results in
Gecko-- ones that don't match any other browser?  I'm not about to start arguing
(again) that we should change what we're doing with inline layout, but what
solution could the evangelism team offer to the reporter, or to anyone in a
similar situation?  Preferably a cross-browser-safe solution?

Comment 7

[dylang]

Thanks.  I felt sheepish for not asking myself.  After spending 20 minutes
futzing with the CSS, and some more googling, I hadn't yet found a conclusion
about it :-/

I was thinging that you could somehow change the img to have a blank
background/transparent border, but that doesn't work.  :(

Comment 8

[Hixie (not reading bugmail)]

Technically, you'd need my :matches() proposal to do this (or one of the many
other -- inferior ;-) -- proposals).

Comment 9

[kevin newman]

i know that this is almost a year later, but has this been resolved? I agree
with comment #4 from eric. if the link consists entirely of one image, how can
that be made to behave the way I think it should (border around the whole image)?