Help, bizarre Mozilla absolute position <div> problem

[nick]

In the web site http://greywolfdesign.com , there is a pop-up menu (when
mouse over 'Portfolio' menu item), it always works well when using IE (6).

However, when using Mozilla 1.6, the popup works well for all the pages
except the 4 pages which can be opened by click the menu link in the
popup. In these four pages, the popup will always be shown at the
leftmost of its parent div (flow) instead of under the 'Portfolio' menu
item.

When tracing the javascript code, I found the the ....style.left and
....style.top cannot be set a value, and it causes the problem. However,
for all other pages, the values can be set.

36 function showPopup(id, menuid) {
37 clearTimeout(mTimeout[id]);
38 var loc = getElementPosition(menuid);
39 var popup = document.getElementById(id);
40 popup.style.position = "absolute";
41 //
42 popup.style.top = loc.top + 15;
43 //
44 popup.style.left = loc.left;
45 //
46 popup.style.display = 'block';
47 }

That's the statements 42, 44 don't work in the problem four pages, but
they work for all other pages. The differents is the four pages may have
a few dreamweaver created javascript routines....

Or can it be a bug of Mozilla?

 

[Richard Cornford]

nick wrote:

42 popup.style.top = loc.top + 15;
43 //
44 popup.style.left = loc.left;
45 //
46 popup.style.display = 'block';
47 }

That's the statements 42, 44 don't work in the problem four
pages, but they work for all other pages. The differents is
the four pages may have a few dreamweaver created javascript
routines....

Or can it be a bug of Mozilla?

No, as usual it is a case of Mozilla doing what it is supposed to do and
IE being tolerant of errors. The properties of the - style - object are
assigned values that correspond with the values used in CSS, and all non
zero CSS length values (which include top and left) as specified to
require a type of unit; px, em, pt, %, etc. So non-zero length values
assigned without units are meaningless in CSS terms, and CSS requires
implementations to ignore properties and values that it does not
understand. Mozilla is ignoring the properties as it is supposed to.

The balance of probability is that the reason that Mozilla is not
ignoring the assignments all of the time is that the pages where you
have a problem are defined in such a way that the browser is put into
"standards" mode, where Mozilla is very strict about the interpretation
of CSS according to the published standards, and the pages that "work"
are such that the browser goes into "quirks" mode and re-produces some
of the erroneous behaviour exhibited by earlier versions and/or other
browsers.

There is a short description of handling the assigning of values for
positioning elements cross-browser, using CSS units where appropriate,
at:-

<URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >

Richard.

 

[nick]

nick wrote:



No, as usual it is a case of Mozilla doing what it is supposed to do and
IE being tolerant of errors. The properties of the - style - object are
assigned values that correspond with the values used in CSS, and all non
zero CSS length values (which include top and left) as specified to
require a type of unit; px, em, pt, %, etc. So non-zero length values
assigned without units are meaningless in CSS terms, and CSS requires
implementations to ignore properties and values that it does not
understand. Mozilla is ignoring the properties as it is supposed to.

The balance of probability is that the reason that Mozilla is not
ignoring the assignments all of the time is that the pages where you
have a problem are defined in such a way that the browser is put into
"standards" mode, where Mozilla is very strict about the interpretation
of CSS according to the published standards, and the pages that "work"
are such that the browser goes into "quirks" mode and re-produces some
of the erroneous behaviour exhibited by earlier versions and/or other
browsers.

There is a short description of handling the assigning of values for
positioning elements cross-browser, using CSS units where appropriate,
at:-

<URL: http://jibbering.com/faq/faq_notes/misc.html#mtCSSUn >

Richard.

Thanks very much, also, i found difference cause the working and
non-working one is the DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This one will make javascript ignore (not assign) the value without unit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
But this one will assume the unit is px and it works.

I found VS.Net also use the late one... and IE just works, is the late
one a better choice?

 

[nick]

Thanks very much, also, i found difference cause the working and
non-working one is the DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This one will make javascript ignore (not assign) the value without unit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
But this one will assume the unit is px and it works.

I found VS.Net also use the late one... and IE just works, is the late
one a better choice?

Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the
height: 100% doesn't work in Mozilla too. So I guess <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..

 

[Michael Winter]

nick wrote:
[snip]

Thanks very much, also, i found difference cause the working and
non-working one is the DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This one will make javascript ignore (not assign) the value without
unit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
But this one will assume the unit is px and it works.

I found VS.Net also use the late one... and IE just works, is the late
one a better choice?

In my opinion, you shouldn't use either. Transitional mark-up shouldn't be
used for modern pages. Move to Strict HTML and CSS (drop elements like
FONT and CENTER, and attributes like bgcolor and align).

Out of the two DTDs above, the former is better. Some browsers will not
actually interpret the DTD correctly and switch into "Standards mode"
without the URI.

As I said above, you should really use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">, the
height: 100% doesn't work in Mozilla too.

What are you trying to set to 100% height? Have you considered the fact
that it shouldn't work according to the specifications?

So I guess <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"> should be better..

I'd say it means your code is still broken.

Mike

 

[Lasse Reichstein Nielsen]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This one will make javascript ignore (not assign) the value without unit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
But this one will assume the unit is px and it works.

I found VS.Net also use the late one... and IE just works, is the late
one a better choice?

Not in my opinion. The first one triggers standards mode, the second
quirks/compatability mode. Quirks mode is made for compatability with
old, badly written pages, and it implements many of the flaws of IE
version 4. That means that old pages written for IE 4 will show as the
author intended. You should *not* make new, badly written pages. New
pages should be written according to the appropriate standards, and
should be displayed in standards mode. That will make them much more
forwards compatible than writing for a seven year old browser's
flaws and quirks.

In this case, add the "px" unit to your lenghts and be standards compliant:
popup.style.top = (loc.top + 15) + "px";
popup.style.left = loc.left + "px";

/L

 

[nick]

nick wrote:

[snip]

Thanks very much, also, i found difference cause the working and
non-working one is the DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This one will make javascript ignore (not assign) the value without
unit.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
But this one will assume the unit is px and it works.

I found VS.Net also use the late one... and IE just works, is the
late one a better choice?

In my opinion, you shouldn't use either. Transitional mark-up shouldn't
be used for modern pages. Move to Strict HTML and CSS (drop elements
like FONT and CENTER, and attributes like bgcolor and align).

Out of the two DTDs above, the former is better. Some browsers will not
actually interpret the DTD correctly and switch into "Standards mode"
without the URI.

As I said above, you should really use

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Also I found that using the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">,
the height: 100% doesn't work in Mozilla too.

What are you trying to set to 100% height? Have you considered the fact
that it shouldn't work according to the specifications?

I want to create a white box in the grey background, and the white box
will be 100% of the browser window (there will be a little bit margin)
when resize. Is it a bad requirement?

 

[Lasse Reichstein Nielsen]

I want to create a white box in the grey background, and the white box
will be 100% of the browser window (there will be a little bit margin)
when resize. Is it a bad requirement?

The web is not paper. Why do you wan't to stop the document at the bottom
of the viewport, and not allow it to overflow? What happens if the content
can't fit in the space available?

Anyway, it's doable. You just have to avoid the collapsing of margins:
---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body,html {
height:100%; padding-top:0px;
padding-bottom:0px;
}
html {
margin-top: -1px;
margin-bottom: -1px;
}
body {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top:0px;
margin-bottom:0px
}

.bottom { position:absolute; bottom:0px; }

</style>
</head>
<body>
<div class="bottom" style="border:4px solid green; background:#c0ffc0;
left:0px; right:0px; text-align:center;">
Hello World
</div>
<h1>Test</h1>
</body>
</html>

 

[nick]

The web is not paper. Why do you wan't to stop the document at the bottom
of the viewport, and not allow it to overflow? What happens if the content
can't fit in the space available?

Anyway, it's doable. You just have to avoid the collapsing of margins:
---
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body,html {
height:100%; padding-top:0px;
padding-bottom:0px;
}
html {
margin-top: -1px;
margin-bottom: -1px;
}
body {
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top:0px;
margin-bottom:0px
}

.bottom { position:absolute; bottom:0px; }

</style>
</head>
<body>
<div class="bottom" style="border:4px solid green; background:#c0ffc0;
left:0px; right:0px; text-align:center;">
Hello World
</div>
<h1>Test</h1>
</body>
</html>

Thanks, in fact, i want a <div> with a minimum 100% height and it can
grow. I want to this because the content of each page is different and
I want to make it a uniform min 100% height (minimum).