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)
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>
Reporter | ||
Comment 1•25 years ago
|
||
Reporter | ||
Comment 2•25 years ago
|
||
Reporter | ||
Updated•25 years ago
|
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]
Comment 3•25 years ago
|
||
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.)
Reporter | ||
Comment 4•25 years ago
|
||
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>
Reporter | ||
Comment 5•25 years ago
|
||
Comment 6•25 years ago
|
||
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.
Comment 7•25 years ago
|
||
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.
Assignee | ||
Updated•25 years ago
|
Status: NEW → RESOLVED
Closed: 25 years ago
Resolution: --- → FIXED
Assignee | ||
Comment 8•25 years ago
|
||
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).
Updated•25 years ago
|
Status: RESOLVED → VERIFIED
Comment 9•25 years ago
|
||
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.
Description
•