197161 - overflow:hidden causes borders to be rendered wrongly

Status: RESOLVED INVALID

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

Description

[Noah Levitt]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4a) Gecko/20030305
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.4a) Gecko/20030305

I'll attach two simple html files. One has overflow:hidden; in a particular spot
in the css, and the other one doesn't; otherwise, the files are identical.
Mozilla does not render the top border on the box with overflow:hidden, and
screws up the border slightly in another spot.

The borders should look the same in both files.

Also seen in win xp (not sure which version).

Reproducible: Always

Steps to Reproduce:

Comment 1

[Noah Levitt]

Attachment: example with overflow:hidden commented out, correctly rendered

Comment 2

[Noah Levitt]

Attachment: incorrectly rendered example, with overflow:hidden;

Comment 3

[Boris Zbarsky [:bzbarsky]]

Hmm... the top/bottom borders of inlines should in fact overflow the block if
the block has no padding, no?

Comment 4

[Noah Levitt]

I'm not entirely sure I know what you mean. But I get the same bug if I put some
padding in the block <div class="tabs">.

Comment 5

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

You probably want a larger 'line-height' on the spans.  This is the way borders
and padding on inline elements work.  See
http://www.w3.org/TR/CSS21/visudet.html#Computing_heights_and_margins (section
10.6.1).

Comment 6

[Noah Levitt]

You're claiming that what mozilla currently does is correct?!

The line-height thing doesn't explain (to me, anyway) why the borders get messed
up. Why would overflow:hidden; reposition the block at all? It is true that the
borders are drawn correctly if I increase the line-height to e.g. 2em, but the
whole block also moves farther up-- there is a big white space between the tabs
and the page.

IE 6 renders the page correctly (according to my view of what is correct).

I'd like to reopen this bug.

Comment 7

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

IE6's behavior is incorrect.  Read the spec URL above.

Comment 8

[Noah Levitt]

I read the spec. I assume that this is the paragraph you want me to see:

"The vertical padding, border and margin of an inline, non-replaced box start at
the top and bottom of the content area, not the 'line-height'. But only the
'line-height' is used to compute the height of the line box."

This paragraph does not explain to me why 'overflow' should have any influence
at all on the position, height or borders of a block or inline.

Comment 9

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

Where do you think 'overflow' is influencing the position of anything?  It's
just clipping the top border, right?

Comment 10

[Noah Levitt]

Ah! My apologies. I understand now.

In linux, where I reported the bug, the bottom-border of the spans overlapped
the top border of the page. In windows, the borders are adjacent. (This is why I
thought the box had moved.) I'm not sure which is correct, but perhaps one of
these is a bug.

Comment 11

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

Differences in font metrics?