Summary: | Small gap appears under div with min-height when it contains a "hr" tag | ||||||||
---|---|---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Dan Richman <dan> | ||||||
Component: | Layout and Rendering | Assignee: | Nobody <webkit-unassigned> | ||||||
Status: | NEW --- | ||||||||
Severity: | Normal | CC: | ahmad.saleem792, bfulgham, ian, phiw2, webkit-bug-importer | ||||||
Priority: | P3 | Keywords: | BrowserCompat, HasReduction, InRadar | ||||||
Version: | 420+ | ||||||||
Hardware: | Mac | ||||||||
OS: | OS X 10.4 | ||||||||
URL: | http://level39.com/hr-bug/ | ||||||||
Attachments: |
|
Description
Dan Richman
2006-04-07 09:08:29 PDT
Created attachment 7555 [details]
Test XHTML Page
Created attachment 7660 [details]
Example of bug in a layout
On both Safari and Opera, a gap mysteriously appears between the MAIN div and the FOOTER div when an "hr" is placed inside the MAIN div. This only happens when the MAIN div has a "min-height" value and no border. On all other browsers, there is never a gap between the two divs.
We implement the space around <hr>s using margins. The bottom margin of the <hr> then collapses with the parent div. This is correct in terms of our implementation. It may be that Firefox and WinIE don't use margins to create the space around an <hr>. We'll need to investigate what exactly they do and try to emulate it. The issue at hand is not limited to <hr> (which e.g. in Gecko also has margins). It is visible for any block level element. The key is the use of min-/max-height on the parent element. In that case, see CSS 2.1:8.3.1 Collapsing margins [quote] The bottom margin of an in-flow block-level element with a 'height' of 'auto' and 'min-height' less than the element's used height and 'max-height' greater than the element's used height is adjoining to its last in-flow block-level child's bottom margin if the element has no bottom padding or border. [/quote] Here are some more tests illustrating the issue (in 'modern' browsers) http://www.brunildo.org/test/collminmax.html What IE 6/7 does is something different, as (height) min- and max height trigger the dreaded 'hasLayout' hell (in this case, the top/bottom margin of the descendant is swallowed into nothingness). This issue reproduces in Safari 16. We do not match Chrome or Firefox. |