469383 - Fixed Div script is not working if there is a <!DOCTYPE > in the source, [ document.body.scrollLeft is always Zero ]

Status: RESOLVED DUPLICATE of bug 246121

(Firefox :: General, defect)

Description

[amreladawy]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4 (.NET CLR 3.5.30729)

I was trying to making  Loading sign just like Gmail. which stays in the same position no matter scrolling or resizing the page.

I developed a javascript which worked successfully.
but I noticed that whenever there is a <!DOCTYPE > node in the HTML source, the javascript is no more working.
just removing or commenting out <!DOCTYPE > will make the script to work again.

I used Javascript Debugger to trace the issue, and I found that the reason of this is that the values of the following variables 
document.body.scrollLeft
document.body.scrollTop

are always set to ZERO no matter scrolling nor resizing. 
hence the script does not feel any scrolling nor resizing. 

Please note that the same page is working on IE, and this is the first time to see something that works on IE and not working on FireFox

Reproducible: Always

Steps to Reproduce:
1. View the attached testcase html file with FireFox.
2. Try to scroll or resize the page
3. Modify the source to activate the <!DOCTYPE > node.
4. Try to scroll or resize the page
Actual Results:  
In case of the presence of the <!DOCTYPE > the loading sign is not fixed any more.

Expected Results:  
The loading sign should be fixed no matter scrolling or resizing of the window.
regardless the presence of the <!DOCTYPE > node.

I am attaching testcase files which are

1- fixed_div_problem.htm   (the HTML that reproduces the problem)
2- FixedDiv.js             (the script used to make the loading sign fixed)

Comment 1

[amreladawy]

Attachment: HTML source to reproduce the problem

open this file with FireFox.
try to scroll or resize, the loading sign in top right corner will stay in its place.

then edit the source of this file to un-comment the <!DOCTYPE > to make it active, which will cause the loading sign to be not fixed anymore

Comment 2

[amreladawy]

Attachment: javascript that is used to make the loading sign fixed no matter scrolling nor resizing

this javascript is used to make the loading sign fixed no matter scrolling nor resizing 

document.body.scrollLeft
in line 55

is always set to zero when the <!DOCTYPE > is the source HTML

Comment 3

[Jesse Ruderman]

Maybe you need to use document.documentElement.scrollLeft in standards-mode documents.

Comment 4

[amreladawy]

I tried that, and it worked on FireFox. but it did not work on IE7 (your customers wont like that )

what I want to say that the presence of the <!DOCTYPE > should not affect the DOM model.

Comment 5

[Jesse Ruderman]

You should be able to use one of these expressions:

(document.documentElement.scrollLeft + document.body.scrollLeft)
(document.documentElement.scrollLeft || document.body.scrollLeft)

This is an intentional difference between quirks mode and standards mode (controlled by the DOCTYPE), but I don't know the rationale and it doesn't seem to be listed at https://developer.mozilla.org/en/Mozilla_Quirks_Mode_Behavior :(