If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

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

VERIFIED INVALID

Status

()

Core
CSS Parsing and Computation
VERIFIED INVALID
15 years ago
15 years ago

People

(Reporter: dylang, Assigned: dbaron)

Tracking

Trunk
x86
All
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

15 years ago
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;
}
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.
Status: UNCONFIRMED → RESOLVED
Last Resolved: 15 years ago
Resolution: --- → INVALID
(Reporter)

Comment 2

15 years ago
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 :)).
(Reporter)

Comment 3

15 years ago
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 :)).
Status: RESOLVED → VERIFIED
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.
I don't know.
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?
(Reporter)

Comment 7

15 years ago
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.  :(
Technically, you'd need my :matches() proposal to do this (or one of the many
other -- inferior ;-) -- proposals).

Comment 9

15 years ago
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)?
You need to log in before you can comment on or make changes to this bug.