97946 - border on inline elements doesn't account for an image child

Status: VERIFIED INVALID

(Core :: Layout, defect)

Description

[Ilya Konstantinov]

A CSS 'border' attribute to an anchor (<A HREF=...>) tag surrounding an image,
appears only around the lower half of the image.

Comment 1

[Ilya Konstantinov]

Attachment: Testcase

Comment 2

[Samuel Sieb]

This seems to happen if the image is inside an inline element (I think that's
the right term).  I will attach another testcase that may make it clearer what
is happening.

Also, moving to layout.

Comment 3

[Samuel Sieb]

Attachment: another testcase

Comment 4

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

We are doing the right thing according to the CSS2 spec.  See CSS2 10.6.1:
http://www.w3.org/TR/REC-CSS2/visudet.html#q15
and *especially* the errata to 10.6.1 (which describes something that was stated
in CSS1 but omitted from the initial CSS2 specification):
http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html#x41

If you want a border that includes the height of inline elements, the spec
provides some ways (such as 'inline-table') (and CSS3 might provide more, such
as 'inline-block' or maybe even some variant of the 'line-height-policy'
proposal in the CSS3 box model draft), but we don't really support any of them
yet (I don't think).

However, in the *original* test case, what the author really wants, I think, is
to specify a border on the image rather than the anchor.

Comment 5

[Hixie (not reading bugmail)]

yup

Comment 6

[Patrick Denny]

Assuming what the required effect is to have a border appear/change around a
linked image, there is a valid "workaround". This will not work properly with
links that combine images and text in their innerHTML, however:

Here you go:
<style type="text/css">
	A {
		text-decoration : none;
		border: ["cold" border];
	}
	A:HOVER {
		border: ["hot" border];
	}
	/* turn off the borders on the Anchor */
	A.noborder {
		border: none;
	}
	A.noborder:HOVER {
		border: none;
		text-decoration : overline;
		/* a "change" is required for IE to initilize the :HOVER
		psuedo-class (this won't effect the img) */
	}
	/* transfer borders to the Image. */
	A.noborder IMG {
		border: ["cold" border];
	}
	A.noborder:HOVER IMG {
		border: ["hot" border];
	}
</style>

<a href="foo">text link</a>
<p>
<a class=noborder href="bar"><img src="image_link"></a>

The nice thing about this is that it will work even if the image has 
align="left|right" turned on.

Thanks to Boris Zbarsky for helping me figure this out.