By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,203 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

Netscape/Mozilla, Divs and Margins

P: n/a
Hi there, everybody.
This here is a sample page of what appears to be a Netscape/Mozilla
positioning problem.
I posted a the problematic code down at the bottom of this message, and
you can see it in action right here:
http://www.nicolaizwar.com/whatsthematterwiththis.html

The red box on the page is supposed to be in a "fixed" position, though
the problem occurs when the position is supposed to be "absolute" as
well. Now IE ignores "fixed" and scrolls anyway, but I can live with
that. In Opera 7, the site shows up exactly as I would expect and I
personally think it should (or do I actually have it wrong, and maybe
Netscape's got it right and Opera doesn't??)

The problem in Netscape 7.1 is that while the box should be positioned
50px down from the top of the page, it's actually positioned down 50px
from the next "div" containing the text (later on in several "p"s.)
For example, if I set the red box to "margin-top: 0x", it will be flush
with the following "div", not with the page.

Is that a known bug or issue? I tried Bugzilla but couldn't really find
something helpful there. What's the work around? Or does one have to
resort to tables here for positioning?

THE CODE (excerpt):

<style type="text/css">
<!--

body { margin: 0px; padding: 0px; }

#redbox { color: #CCCCCC;
margin-top: 50px; margin-left: 35px; margin-bottom: 30px;
padding: 0px; background-color: red; z-index: 100;
position: fixed; width: 600px; height: 50px;
}

-->
</style></head><body>

<div id="redbox">
Blabla blabla blabla.
</div>

<div style="position: relative; padding: 0px; margin-top: 200px;
margin-right: 15%; margin-left: 15%;">
<p>
Blablablabla
</p>
</div>
--
Nicolai Zwar -- http://www.nicolaizwar.com

"I don't post off-topic digests. I consistently ask the antagonists
what their postings have to do with classical music, which happens to be
the topic of this newsgroup."
(Dr. David J. Tholen, Astronomer, in his "Antagonists Digest, Volume
2452972, posted in rec.music.classical)

Jul 20 '05 #1
Share this Question
Share on Google+
6 Replies


P: n/a
Nicolai P. Zwar wrote:
Hi there, everybody.
This here is a sample page of what appears to be a Netscape/Mozilla
positioning problem.
I posted a the problematic code down at the bottom of this message, and
you can see it in action right here:
http://www.nicolaizwar.com/whatsthematterwiththis.html

The red box on the page is supposed to be in a "fixed" position, though
the problem occurs when the position is supposed to be "absolute" as
well. Now IE ignores "fixed" and scrolls anyway, but I can live with
that. In Opera 7, the site shows up exactly as I would expect and I
personally think it should (or do I actually have it wrong, and maybe
Netscape's got it right and Opera doesn't??)

The problem in Netscape 7.1 is that while the box should be positioned
50px down from the top of the page, it's actually positioned down 50px
from the next "div" containing the text (later on in several "p"s.)
For example, if I set the red box to "margin-top: 0x", it will be flush
with the following "div", not with the page.

Is that a known bug or issue? I tried Bugzilla but couldn't really find
something helpful there. What's the work around? Or does one have to
resort to tables here for positioning?

THE CODE (excerpt):

<style type="text/css">
<!--

body { margin: 0px; padding: 0px; }

#redbox { color: #CCCCCC;
margin-top: 50px; margin-left: 35px; margin-bottom: 30px;
padding: 0px; background-color: red; z-index: 100;
position: fixed; width: 600px; height: 50px;
}

-->
</style></head><body>

<div id="redbox">
Blabla blabla blabla.
</div>

<div style="position: relative; padding: 0px; margin-top: 200px;
margin-right: 15%; margin-left: 15%;">
<p>
Blablablabla
</p>
</div>

Well, I found a possible solution for this: it's to add an empty div,
give it the top margin you want, and the red box will be flush with that
div. Only Netscape/Mozilla seem to need this, though fortunately this
doesn't interfere with the other browsers. Odd...

--
Nicolai Zwar -- http://www.nicolaizwar.com

"I don't post off-topic digests. I consistently ask the antagonists
what their postings have to do with classical music, which happens to be
the topic of this newsgroup."
(Dr. David J. Tholen, Astronomer, in his "Antagonists Digest, Volume
2452972, posted in rec.music.classical)

Jul 20 '05 #2

P: n/a
"Nicolai P. Zwar" <NP****@bigfoot.com> wrote in
news:bu**********@online.de:
#redbox { color: #CCCCCC;
margin-top: 50px; margin-left: 35px; margin-bottom: 30px;
padding: 0px; background-color: red; z-index: 100;
position: fixed; width: 600px; height: 50px;
}


While you've specified fixed positioning, you haven't specified any of the
four possible offsets (top, right, bottom, left) so they all default to
"auto" which leaves you at the mercy of browser layout algorithms. I'm
going to guess that you actually want to put it 50px down from the top and
35px to the right of the left edge; in that case you should be using
offsets rather than margins for top and left.

Jul 20 '05 #3

P: n/a
Eric Bohlman wrote:
#redbox { color: #CCCCCC;
margin-top: 50px; margin-left: 35px; margin-bottom: 30px;
padding: 0px; background-color: red; z-index: 100;
position: fixed; width: 600px; height: 50px;
}

While you've specified fixed positioning, you haven't specified any of the
four possible offsets (top, right, bottom, left) so they all default to
"auto" which leaves you at the mercy of browser layout algorithms. I'm
going to guess that you actually want to put it 50px down from the top and
35px to the right of the left edge; in that case you should be using
offsets rather than margins for top and left.


You are absolutely right, Eric. 8-) Too many hours in front of the
screen, I guess. In fact, in the first pages I coded I had specified the
top position _and_ the margins, then somehow via copy and paste I must
have lost the offsets and didn't notice it, because Opera and IE
continued to show the same thing. This answer is the tree I couldn't see
because of the forest. I don't know how many more hours I would have
lost looking for what is the most obvious answer; now that I re-inserted
the offsets, everything's back to normal. Thanks!
--
Nicolai Zwar -- http://www.nicolaizwar.com

"I don't post off-topic digests. I consistently ask the antagonists
what their postings have to do with classical music, which happens to be
the topic of this newsgroup."
(Dr. David J. Tholen, Astronomer, in his "Antagonists Digest, Volume
2452972, posted in rec.music.classical)

Jul 20 '05 #4

P: n/a
"Nicolai P. Zwar" <NP****@bigfoot.com> wrote in
news:bu**********@online.de:
While you've specified fixed positioning, you haven't specified any
of the four possible offsets (top, right, bottom, left) so they all
default to "auto" which leaves you at the mercy of browser layout
algorithms. I'm going to guess that you actually want to put it 50px
down from the top and 35px to the right of the left edge; in that
case you should be using offsets rather than margins for top and
left.


You are absolutely right, Eric. 8-) Too many hours in front of the
screen, I guess. In fact, in the first pages I coded I had specified
the top position _and_ the margins, then somehow via copy and paste I
must have lost the offsets and didn't notice it, because Opera and IE
continued to show the same thing. This answer is the tree I couldn't
see because of the forest. I don't know how many more hours I would
have lost looking for what is the most obvious answer; now that I
re-inserted the offsets, everything's back to normal. Thanks!


Let me guess: you stared at your stylesheet for hours and actually saw
offset specifications even though you had dropped them. Welcome to
"psychological set," the mind's ability to see what it's expecting to see
rather than what the senses actually perceive. Douglas Adams based his
concept of the "SEP (Someone Else's Problem) field" on psychological set.
Anyone who's ever debugged a program or proofread a manuscript has had the
experience of staring at their work and seeing what they meant to write
rather than what they actually did write. Gerald Weinberg had much to say
about psychological set in his classic _The Psychology of Computer
Programming_; as an example, he pointed out that any programming who names
a variable "ST0P" (yes, that's a zero) is setting himself up for failure.

Psychological set is actually a consequence of the way our brains try to
minimize the demands on our attention mechanism (it's no accident that we
speak of "paying" attention; attention is a scarce resource in our brains'
"economy"). It's what's called a "heuristic"; a process that gives the
correct results *most* of the time, but sometimes fails. It relieves us
from the need to consciously attend to all the minute details of everyday
life, but it leads to mistakes in the (relatively small) class of human
endeavors that require extreme precision. It explains why, for example,
someone else who looks at your code (and doesn't fully know what you
intended to write) can instantly spot errors that you can't.

Psychological set is one of the reasons why it's so important to use
validators (though in your case, a validator couldn't have caught your
mistake). A validator, being a mechanical process with a level of
"intelligence" that could easily be beat by a moderately retarded five-
year-old, doesn't make any assumptions; it just literally follows a bunch
of simple rules. And therefore it's too stupid to experience psychological
set, which means that it will catch a lot of common mistakes.

Jul 20 '05 #5

P: n/a
Eric Bohlman wrote:
Let me guess: you stared at your stylesheet for hours and actually saw
offset specifications even though you had dropped them.
I don't know whether I actually "saw" them, it simply didn't even occur
to me at all that they might not be there (especially not since IE and
Opera put the box where I wanted it anyway, even without offset specs).
This was way too easy... so I assumed completely different reasons. :)
Kinda like checking the electronic of your car when the problems is a
lack of fuel.
Welcome to
"psychological set," the mind's ability to see what it's expecting to see
rather than what the senses actually perceive. Douglas Adams based his
concept of the "SEP (Someone Else's Problem) field" on psychological set.
Anyone who's ever debugged a program or proofread a manuscript has had the
experience of staring at their work and seeing what they meant to write
rather than what they actually did write. Gerald Weinberg had much to say
about psychological set in his classic _The Psychology of Computer
Programming_; as an example, he pointed out that any programming who names
a variable "ST0P" (yes, that's a zero) is setting himself up for failure.

Psychological set is actually a consequence of the way our brains try to
minimize the demands on our attention mechanism (it's no accident that we
speak of "paying" attention; attention is a scarce resource in our brains'
"economy"). It's what's called a "heuristic"; a process that gives the
correct results *most* of the time, but sometimes fails. It relieves us
from the need to consciously attend to all the minute details of everyday
life, but it leads to mistakes in the (relatively small) class of human
endeavors that require extreme precision. It explains why, for example,
someone else who looks at your code (and doesn't fully know what you
intended to write) can instantly spot errors that you can't.

Psychological set is one of the reasons why it's so important to use
validators (though in your case, a validator couldn't have caught your
mistake). A validator, being a mechanical process with a level of
"intelligence" that could easily be beat by a moderately retarded five-
year-old, doesn't make any assumptions; it just literally follows a bunch
of simple rules. And therefore it's too stupid to experience psychological
set, which means that it will catch a lot of common mistakes.


Good ol' Doug... why did he have to go so young...
But indeed, I already had checked the (shortened) stylesheet via
validator and it was perfectly happy with it. Nope, it said. No
problems. Keep goin', chap! Box here, box there, looks good to me either
way. Next problem? Validators lack taste.

--
Nicolai Zwar -- http://www.nicolaizwar.com

"I don't post off-topic digests. I consistently ask the antagonists
what their postings have to do with classical music, which happens to be
the topic of this newsgroup."
(Dr. David J. Tholen, Astronomer, in his "Antagonists Digest, Volume
2452972, posted in rec.music.classical)

Jul 20 '05 #6

P: n/a
"Nicolai P. Zwar" <NP****@bigfoot.com> wrote in
news:bu**********@online.de:
Good ol' Doug... why did he have to go so young...
Indeed. He posessed one of the most finely-calibrated bullshit detectors
known to mankind. Am I the only one who thinks that J.K. Rowling picked up
a few of his sensibilities and kept them alive (admittedly, they could
have both gotten it from P.G. Wodehouse)?
But indeed, I already had checked the (shortened) stylesheet via
validator and it was perfectly happy with it. Nope, it said. No
problems. Keep goin', chap! Box here, box there, looks good to me
either way. Next problem? Validators lack taste.


He who develops a validator with good taste will win a Nobel Prize for
aesthetics. Seriously, the ability to pick up correct syntax doesn't
extend to the ability to pick up correct semantics; witness Lewis Carroll's
"Jabberwocky." (I suppose if CSS were expressed in XML, something like Rick
Jelliffe's Schematron could pick up constraints like "any positioned
element must specify at least one offset).
Jul 20 '05 #7

This discussion thread is closed

Replies have been disabled for this discussion.