Closed Bug 8994 Opened 25 years ago Closed 25 years ago

[4.xP] excessive vertical space before HTML elements with font-size set by CSS

Categories

(Core :: CSS Parsing and Computation, defect, P3)

x86
Windows NT
defect

Tracking

()

VERIFIED FIXED

People

(Reporter: ekrock, Assigned: peterl-retired)

References

()

Details

(Whiteboard: [TESTCASE])

Attachments

(3 files)

Seamonkey M7 build on WinNT4.0 SP3. Test case attached. Compare the referenced testcase page (either at the internal URL or from the attachment) in Nav4 and in M7. Note that there is too much vertical space before each element when viewed in Nav5. Note in particular the distance between the top of the content area and the first H1 element; the gap is too large. So is the gap between the H1 and the P. Here is the markup of the test case lineHeightNoCSS2.html FYI -- very simple page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H1>JavaScript Animation Demo</H1> <P><A HREF="demo/fish1/fish1.htm" TARGET="fish">Fish and Poles</A></P> </BODY> </HTML> Note also that the problem seems to get proportionally worse as we increase the font size. Here is the same page except that we've added CSS markup to make the font-size large for H1 and P. Correspondingly, we see even large gaps before each element. This is test case lineHeightCSS2.html, attached: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE TYPE="text/css"> H1 { font-size: 44pt } P { font-size: 36pt } </STYLE> </HEAD> <BODY> <H1>JavaScript Animation Demo</H1> <P><A HREF="demo/fish1/fish1.htm" TARGET="fish">Fish and Poles</A></P> </BODY> </HTML>
Attached file [TESTCASE] HTML-only, no CSS markup (deleted) —
Summary: [TESTCASE] [4.xP] excessive vertical space before HTML elements with font-size set by CSS → [4.xP] excessive vertical space before HTML elements with font-size set by CSS
Whiteboard: [TESTCASE]
Part of the problem involves ua.css. Perhaps the default margins in ua.css on header elements should be changed from margin: 1em 0; to margin: 1em 0 0.5em 0; /* final 0 optional */ which would reduce the bottom margins on Hn. That seems closer to the legacy rendering. Todd Fahrner's research into legacy defaults led to http://www.w3.org/TR/REC-CSS2/sample.html , which could be useful. (I think giving these margins in px is a bad idea, so when the p font-size is 36pt, it should have a big margin-top.)
Using these settings (see testcase lineHeightSetMarginEm.html) seems to restore behavior similar to the Nav4 default: <STYLE TYPE="text/css"> H1 { font-size: 44pt; margin-top: 0px; margin-bottom: 0.3em; } P { font-size: 36pt; margin-top: 0px; margin-bottom: 0.3em; } </STYLE>
Part of the problem is that NS4.x (and IE4 as well) swallows the top margin of the first block level element of the body by default. To be compatible add the following to ua.css: BODY > :first-child {margin-top: 0px;} Web designers can override this by setting the margins of H1 or P in their style sheets - which is matches the behaviour of both NS4.x and IE4 so I think it's a very good solution.
This solution won't work with HTML4 Transitional documents where the initial element may follow some #PCDATA, because :first-child doesn't match the #PCDATA content.
Status: NEW → RESOLVED
Closed: 25 years ago
Resolution: --- → FIXED
I liked the :first-child idea so much that I created a new psuedo class ":first-node" that works that way (it only ignores whitespace).
Status: RESOLVED → VERIFIED
Using 9/16 Apprunner, verifying bug fixed. Vertical space reduced.
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: