Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Help, bizarre Mozilla absolute position <div> problem

Reply
Thread Tools

Help, bizarre Mozilla absolute position <div> problem

 
 
nick
Guest
Posts: n/a
 
      05-08-2004
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?
 
Reply With Quote
 
 
 
 
Richard Cornford
Guest
Posts: n/a
 
      05-08-2004
nick wrote:
<snip>
> 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.


 
Reply With Quote
 
 
 
 
nick
Guest
Posts: n/a
 
      05-08-2004
Richard Cornford wrote:

> nick wrote:
> <snip>
>
>>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.
>
>

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?
 
Reply With Quote
 
nick
Guest
Posts: n/a
 
      05-08-2004
nick wrote:

> Richard Cornford wrote:
>
>> nick wrote:
>> <snip>
>>
>>> 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.
>>
>>

> 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..
 
Reply With Quote
 
Michael Winter
Guest
Posts: n/a
 
      05-08-2004
On Sat, 08 May 2004 01:02:04 -0400, nick <(E-Mail Removed)> wrote:

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

and validate your pages (see <URL:http://validator.w3.org/>).

> 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

--
Michael Winter
http://www.velocityreviews.com/forums/(E-Mail Removed)d (replace ".invalid" with ".uk" to reply)
 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      05-08-2004
nick <(E-Mail Removed)> writes:

> <!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
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
nick
Guest
Posts: n/a
 
      05-08-2004
Michael Winter wrote:

> On Sat, 08 May 2004 01:02:04 -0400, nick <(E-Mail Removed)> wrote:
>
>> 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">
>
> and validate your pages (see <URL:http://validator.w3.org/>).
>
>> 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?

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

 
Reply With Quote
 
Lasse Reichstein Nielsen
Guest
Posts: n/a
 
      05-08-2004
nick <(E-Mail Removed)> writes:

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

/L
--
Lasse Reichstein Nielsen - (E-Mail Removed)
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
 
Reply With Quote
 
nick
Guest
Posts: n/a
 
      05-08-2004
Lasse Reichstein Nielsen wrote:

> nick <(E-Mail Removed)> writes:
>
>
>>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>
> ---
>
> /L

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).
 
Reply With Quote
 
 
 
Reply

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 On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How does one get an absolute absolute file path? James Byrne Ruby 3 09-14-2010 06:02 PM
Problem with panel with absolute position Dimitris Milonas ASP .Net 3 10-21-2007 05:32 PM
Problem with CSS absolute position/overflow scroll Adam Plocher HTML 4 05-26-2006 06:10 PM
Bizarre CSS problem with "absolute" positioning - Help! David Smithz HTML 5 05-22-2006 02:20 PM
Where is Form Relative Position and Absolute Position in VS.Net 2005 ? Luqman ASP .Net 1 02-07-2006 10:27 AM



Advertisments