Closed Bug 282982 Opened 20 years ago Closed 20 years ago

top border overlaps contained image

Categories

(Core :: Layout: Block and Inline, defect)

Product:
Core
Component:
Layout: Block and Inline
Platform:
x86
Windows XP
Type:
defect
Priority:
Not set
Severity:
major

Tracking

()

Status:
RESOLVED INVALID

People

(Reporter: bleroy, Unassigned)

Details

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.7.5) Gecko/20041108 Firefox/1.0

The top border seems to assume the contents of the link are text: the position
of the border is the position is should have if the link contained text. It
doesn't take the height of the image into account, even if the size of the image
is specified on the image itself, on the link or on both.
The only workaround I've found is to apply the style on a block element that
wraps the image (see third link in the repro), but a block is not always desirable.
Note: does not repro on IE.

Reproducible: Always

Steps to Reproduce:
1. Browse to a page containing the following html:
<html>
<head>
</head>
<body>
    <form runat="server">
        <a href="/somepage.htm" style="border-top: solid 1px black">
            <img src="image.gif" style="border:none"/>
        </a>
        <a href="/somepage.htm" style="border-top: solid 1px black">
            Texte
        </a>
        <a href="/somepage.htm">
            <div height="23" style="border-top: solid 1px black">
                <img src="image.gif" style="border:none"/>
            </div>
        </a>
    </form>
</body>
</html>

image.gif must be an image higher than a line of text in the default font.
Notice there are three links in the repro, but only the first one shows the
problem, the others are for comparison and workaround.
Actual Results:  
The first image has its top border rendered over the image, at the same height
as the border over the text in the second link.

Expected Results:  
The top border should be rendered on top of the image, not over it (as it does
in the third link, which contains a div).
That's not how inline elements work.  See 10.6.1 of CSS2.1.
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago
Component: GFX → Layout: Block and Inline
Resolution: --- → INVALID
(In reply to comment #2)
> ...which is
> http://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#inline-non-replaced
> (See also http://www.w3.org/TR/REC-CSS1-961217#the-height-of-lines .)

The first link does not specify what should happen when an image is present, 
but the second one is *very explicit*, and it contradicts the Gecko behavior:

"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. 

In the normal case, when there is only one value of 'line-height' throughout a 
paragraph, *and no tall images*, the definition above will ensure that 
baselines of successive lines are exactly 'line-height' apart."

(emphasis added by me)

I respectfully ask that this is fixed as it is counter-intuitive, not always 
possible to work around, and explicitly against the standard.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
Please reread the section of the spec without confusing "line box" and "inline box".
Status: UNCONFIRMED → RESOLVED
Closed: 20 years ago → 20 years ago
Resolution: --- → INVALID
(In reply to comment #4)
> Please reread the section of the spec without confusing "line box" 
and "inline box".

I still don't see how this implies that the top border of the enclosing A 
should be under the top border of its contents.
But it's your product, you do what you want with it, I'm just trying to help 
and tell you what looks to me as very odd and unnatural.

I guess all I can do is apply the border on the image itself or add a div.
It's not my decision -- the CSS2.1 spec is quite clear.  CSS1 wasn't as clear,
but the correct forum to complain is not here, but on
http://lists.w3.org/Archives/Public/www-style/ (and 8 years ago).
(In reply to comment #6)
I trust your judgement on this one.
You need to log in before you can comment on or make changes to this bug.