Netscape/Mozilla, Divs and Margins

Nicolai P. Zwar

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">

</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

Subscribe Reply

2328

Nicolai P. Zwar

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">

</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

Eric Bohlman

"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

Nicolai P. Zwar

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

Eric Bohlman

"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

Nicolai P. Zwar

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

Eric Bohlman

"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

Similar topics

3903

netscape mozilla iexplorer standard

by: Piotr Wolski | last post by:

how to make my page that it was correct with every browser standard? for example when i change HTML's table size it has no effect when i see it under mozilla and has effect under Internet...

PHP

1628

Netscape and xhtml

by: Sector024 Media | last post by:

My question is why netscape doesn't seem to support a style definition in a table? I have my pages as valid xhtml1.0, and still netscape is not folowing orders.. <table...

HTML / CSS

2486

Unwanted space btwn divs in Netscape

by: Aaron | last post by:

Hi, In the following code, everything looks fine on Explorer, but on Netscape there is a large white gap between the 'top' section and the 'bottom menu' section. I've set the style 'div img...

HTML / CSS

3635

Positioning Problem - IE good, Mozilla/Netscape bad!

by: SWE | last post by:

Hi all, I'm new to using style sheets for laying out my web pages. I have a horizontal navigation menu that is split into two sections - three buttons on the left and a submenu on the right that...

HTML / CSS

2387

Difference in IE and Netscape

by: Ben | last post by:

I have a page (www.eastex.net/ben/NewETN/index3.asp) that displays OK in IE, but not in Netscape. I used a combination of padding-top and height attributes to get a total height on four cells. ...

HTML / CSS

4710

Absolutely positioned div links unclickable in Netscape

by: Jonas Smithson | last post by:

Hello all, I have an absolute positioned parent div, and nested inside it is an absolute positioned child div -- I mean the div *code* is nested inside, but the child is physically positioned so...

HTML / CSS

13480

centering two divs

by: red | last post by:

How do I center two side by side divs ? I've been writing css pages for a while but there's one thing tha still eludes me. I can center a div with margin auto. I can place two divs side by side...

HTML / CSS

3124

elementFromPoint netscape/mozilla equivilent

by: Darren | last post by:

Hi. I have a javascript menu system which uses the "elementFromPoint" function. However Netscape/Mozilla doesn't recognise this function. Does it have an equivilent? Thanks -- Darren

Javascript

2233

Netscape margin attributes

by: silverbob | last post by:

I have been writing web pages for years using these attributes to the body tag: <body bgcolor=#FFFFFF marginwidth=0 leftmargin=0 marginheight=0 topmargin=0> I'm now attempting to bring my...

HTML / CSS

7225

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

7326

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

7383

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

5627

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

Career Advice

5053

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

4707

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3194

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3182

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

766

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP