Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 20th, 2005, 10:25 PM
Nicolai P. Zwar
Guest
 
Posts: n/a
Default Netscape/Mozilla, Divs and Margins

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)

  #2  
Old July 20th, 2005, 10:25 PM
Nicolai P. Zwar
Guest
 
Posts: n/a
Default Re: Netscape/Mozilla, Divs and Margins

Nicolai P. Zwar wrote:
[color=blue]
> 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>[/color]


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)

  #3  
Old July 20th, 2005, 10:26 PM
Eric Bohlman
Guest
 
Posts: n/a
Default Re: Netscape/Mozilla, Divs and Margins

"Nicolai P. Zwar" <NPZwar@bigfoot.com> wrote in
news:buopo7$cnd$1@online.de:
[color=blue]
> #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;
> }[/color]

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.

  #4  
Old July 20th, 2005, 10:26 PM
Nicolai P. Zwar
Guest
 
Posts: n/a
Default Re: Netscape/Mozilla, Divs and Margins

Eric Bohlman wrote:
[color=blue][color=green]
>>#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;
>>}[/color]
>
>
> 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.[/color]

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)

  #5  
Old July 20th, 2005, 10:26 PM
Eric Bohlman
Guest
 
Posts: n/a
Default Re: Netscape/Mozilla, Divs and Margins

"Nicolai P. Zwar" <NPZwar@bigfoot.com> wrote in
news:buqs45$8iq$1@online.de:
[color=blue][color=green]
>> 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.[/color]
>
> 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![/color]

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.

  #6  
Old July 20th, 2005, 10:26 PM
Nicolai P. Zwar
Guest
 
Posts: n/a
Default Re: Netscape/Mozilla, Divs and Margins

Eric Bohlman wrote:
[color=blue]
> Let me guess: you stared at your stylesheet for hours and actually saw
> offset specifications even though you had dropped them.[/color]

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.
[color=blue]
> 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.[/color]

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)

  #7  
Old July 20th, 2005, 10:27 PM
Eric Bohlman
Guest
 
Posts: n/a
Default Re: Netscape/Mozilla, Divs and Margins

"Nicolai P. Zwar" <NPZwar@bigfoot.com> wrote in
news:bus2lv$nd5$1@online.de:
[color=blue]
> Good ol' Doug... why did he have to go so young...[/color]

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)?
[color=blue]
> 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.[/color]

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).
 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles