Closed
Bug 2502
Opened 26 years ago
Closed 25 years ago
Positioned elements too low
Categories
(Core :: Layout, defect, P2)
Tracking
()
VERIFIED
FIXED
M15
People
(Reporter: dbaron, Assigned: buster)
References
()
Details
For some reason, the entire header in the URL above is pushed down. (relative
and absolute positioning stuff). And, when I scroll down and then scroll back
up, it is painted at different places between where it starts and where it
should be (creating one of those nice patters of shadowed fonts...)
I'm not seeing anything wrong with http://www.fas.harvard.edu/~dbaron/ with myt
build. I just pulled the tree so maybe something was wrong and has been fixed?
Can you explain with more detail what's displaying incorrectly?
|
Reporter | |
Comment 2•26 years ago
|
||
The main thing is that it looks like BODY or the H1 has a top-padding of about
5em, and then height of about 5em. Except when I scroll down and then back up,
I get one where it was to start, and then one a pixel higher, etc...
I'm still not seeing anything funny. Maybe it's a difference in top-of-trunk and
the build you're running. Please let me know if it looks any better tomorrow
Status: ASSIGNED → RESOLVED
Closed: 26 years ago
Resolution: --- → WORKSFORME
I just tried this with a release build under Win98 and it looks fine to me...
|
|
Reporter | |
Comment 5•26 years ago
|
||
I'm still seeing this on the 99-01-20 build. I'll try again for 99-01-21, if
and when that build comes out...
|
|
Reporter | |
Updated•26 years ago
|
Status: RESOLVED → REOPENED
|
|
Reporter | |
Comment 6•26 years ago
|
||
Ack... sorry. I just realized the problem. You *must* set NG_REQUEST_VER to
5.0 because the CSS is browser-sniffed. (Shouldn't you be changing the version
number soon?) I do that in my autoexec.bat, and sometimes I forget to mention
it on relevant pages. Anyway, since I realized this only after I made images
of the problem, the screenshots are at:
http://www.fas.harvard.edu/~dbaron/tests/nglayout/bug.html
Ah, now it makes more sense. That also explains why for bug #2525 I was getting
served the wrong style sheet
Okay, there are two problem here:
1. a problem with view content transparency that I fixed. Now the header is
displayed properly and doesn't paint with garbage when scrolled
2. the second problem is a vertical collapsing problem, which is why I'm giving
this to Kipp.
Kipp, make sure you set NG_REQUEST_VER=5.0 or you won't see the problem. What I
think is happening is that the heading (David Baron's HOME PAGE) is done using a
relatively positioned element with two absolutely positioned child elements.
The relatively positioned element has an explicit 'height:0' and the collapsing
margin code is then using the 'margin-top' of the P that follows as the carried
out top margin.
This smaller piece of HTML demonstrates the problem. Remove the P element that
follows and you'll see what I mean.
<HTML LANG="en-US">
<HEAD>
<base href="http://www.fas.harvard.edu/~dbaron/">
<LINK REL="stylesheet" HREF="http://www.w3.org/StyleSheets/Core/Ultramarine"
TITLE="Ultramarine" TYPE="text/css">
<LINK REL="stylesheet" HREF="index.scss" TYPE="text/css">
</HEAD>
<BODY>
<H1 ID="head"><SPAN ID="headname">David Baron's</SPAN> <SPAN
ID="headhp">Homepage</SPAN></H1>
<P STYLE="margin-bottom: 0; padding-bottom: 0;" ID="afterhead">[<A
HREF="index.html.es">Español</A>]</P>
</BODY></HTML>
|
|
Reporter | |
Comment 9•26 years ago
|
||
Margins in relatively positioned elements should not collapse. See:
http://www.w3.org/TR/REC-CSS2/box.html#collapsing-margins
(The reason the CSS is so strange is that I have to work around a bug in
IE4/IE5. But that's beside the point. It's still correct CSS.)
|
||
Comment 10•26 years ago
|
||
Setting all current Open/Normal to M4.
|
||
Comment 11•26 years ago
|
||
Because David's homepage has changed, here's some new HTML that demonstrates the
problem, this time with inline style:
<head>
<style>
BODY {
/* Reduce the huge margins, since I have 2 columns */
margin-left: 3%;
margin-right: 3%;
margin-top: 2em;
margin-bottom: 2em;
}
#head {
position: relative;
font-size: 100%;
/*height: 5.1em;*/ /* Just enough room if no absolute positioning
support */
height: 0;
padding: 0;
margin: 0;
border: none;
}
#headhp, #headname {
display: block;
position: absolute;
padding: 0;
margin: 0;
border: none;
white-space: nowrap;
}
#headname {
font-size: 400%;
font-family: Verdana, sans-serif;
font-weight: 700;
color: #990;
top: 0;
left: 0;
background: transparent;
z-index: 1;
line-height: 1;
}
#headhp {
font-size: 110%;
font-family: Arial, Helvetica, sans-serif;
font-weight: 900;
letter-spacing: 1.5em;
word-spacing: 1.0em;
/* color: #0ff; */
color: #c33;
top: 1.9em;
left: 0;
margin-left: 5em; /* so it works even in CSS1 */
text-transform: uppercase;
background: transparent;
z-index: 2;
line-height: 1;
}
#afterhead {
margin-top: 5.1em;
}
</style>
</HEAD>
<BODY>
<H1 ID="head"><SPAN ID="headname">David Baron's</SPAN> <SPAN
ID="headhp">Homepage</SPAN></H1>
<P ID="afterhead">[<A HREF="index.html.es">Español</A>]</P>
</body>
|
|
||
Comment 12•26 years ago
|
||
*** Bug 3160 has been marked as a duplicate of this bug. ***
|
||
Updated•26 years ago
|
QA Contact: 4110
|
|
||
Comment 13•26 years ago
|
||
Adding chrisd@netscape.com as QA contact.
|
|
Reporter | |
Comment 14•26 years ago
|
||
Between the builds of 99-03-02 and 99-03-05 (Win95, opt.) you changed something
so that the relatively+absolutely positioned text ("David Baron's Homepage")
now completely disappears.
|
|
Reporter | |
Comment 15•26 years ago
|
||
|
|
Reporter | |
Updated•25 years ago
|
Status: ASSIGNED → RESOLVED
Closed: 26 years ago → 25 years ago
Resolution: --- → FIXED
|
|
Reporter | |
Comment 16•25 years ago
|
||
Marking this fixed. I think it's been fixed for months, but bug 2062 made it
impossible to tell.
|
|
||
Updated•25 years ago
|
Status: RESOLVED → VERIFIED
|
|
||
Comment 17•25 years ago
|
||
Using 8/2 apprunner, verifying bug fixed.
You need to log in
before you can comment on or make changes to this bug.
Description
•