overflow:hidden causes borders to be rendered wrongly




Layout: Block and Inline
15 years ago
15 years ago


(Reporter: Noah Levitt, Unassigned)



Firefox Tracking Flags

(Not tracked)



(2 attachments)



15 years ago
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

15 years ago
Created attachment 117048 [details]
example with overflow:hidden commented out, correctly rendered

Comment 2

15 years ago
Created attachment 117049 [details]
incorrectly rendered example, with overflow:hidden;
Hmm... the top/bottom borders of inlines should in fact overflow the block if
the block has no padding, no?

Comment 4

15 years ago
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">.
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
Last Resolved: 15 years ago
Resolution: --- → INVALID

Comment 6

15 years ago
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.
IE6's behavior is incorrect.  Read the spec URL above.

Comment 8

15 years ago
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.
Where do you think 'overflow' is influencing the position of anything?  It's
just clipping the top border, right?

Comment 10

15 years ago
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.

Differences in font metrics?
You need to log in before you can comment on or make changes to this bug.