xhtml style.left problem

C

carex

Hello,

Since a few weeks I am trying to use xhtml i.s.o html everywhere in my web
application

But, for the first time, I have something that is working perfectly with
IE6 but not in Firefox when I use a DOCTYPE

Here below the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>offset</title>
<script type="text/javascript">
//<![CDATA[
var delta=3;
function move(){
var y=document.getElementById("myDiv").offsetLeft;
if (y > screen.width - document.getElementById("myDiv").offsetWidth) {
delta=-3;
}
if (y < 0) {
delta=3;
}
y+=delta;
document.getElementById("myDiv").style.left=y;
document.getElementById("pos").innerHTML=y;
setTimeout("move()",30);
}
//]]>
</script>
</head>
<body onload="alert(document.compatMode);javascript:move()">
<div id="myDiv" style="position:absolute; left:50px; top:100px; width:200px; height:50px; background-color:blue;">
<h4>That's it damnit !!!(<span id="pos">pos</span>)</h4>
</div>
</body>
</html>


In Firefox, altough there is no error detected, the position is not
updated.
But if I remove the DOCTYPE then it works.

Is it a problem with Firefox ????

Thanks.
carex.
 
D

David Dorward

Since a few weeks I am trying to use xhtml i.s.o html everywhere in my web
application
Click to expand...

There is no such thing as "xhtml i.s.o html".

XHTML is not recommended: http://www.webdevout.net/articles/beware-of-xhtml

ISO HTML is usually more trouble then it is worth ... and since you
use JS in your example, unsuitable for you.

HTML 4.01 Strict is recommended.
But, for the first time, I have something that is working perfectly with
IE6 but not in Firefox when I use a DOCTYPE
Click to expand...

Activating Standards mode and making browsers less forgiving of
errors.
if (y < 0) {
delta=3;
}
y+=delta;
document.getElementById("myDiv").style.left=y;
Click to expand...

The left property takes a length. You've just assigned it what I
suspect will turn out to be a number (although it might be something
like 40px3, I'm not certain).
 
S

Steve Pugh

But, for the first time, I have something that is working perfectly with
IE6 but not in Firefox when I use a DOCTYPE

Here below the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>offset</title>
<script type="text/javascript">
//<![CDATA[
var delta=3;
function move(){
var y=document.getElementById("myDiv").offsetLeft;
if (y > screen.width - document.getElementById("myDiv").offsetWidth) {
delta=-3;
}
if (y < 0) {
delta=3;
}
y+=delta;
document.getElementById("myDiv").style.left=y;
document.getElementById("pos").innerHTML=y;
setTimeout("move()",30);
}
//]]>
</script>
</head>
<body onload="alert(document.compatMode);javascript:move()">
<div id="myDiv" style="position:absolute; left:50px; top:100px; width:200px; height:50px; background-color:blue;">
<h4>That's it damnit !!!(<span id="pos">pos</span>)</h4>
</div>
</body>
</html>

In Firefox, altough there is no error detected, the position is not
updated.
But if I remove the DOCTYPE then it works.

Is it a problem with Firefox ????
Click to expand...


With the doctype in place FireFox is obeying the standards and the CSS
standards say that the value of the left property is a length. Lengths
have units. Your inline style has units (50px) but the style you're
applying via JavaScript doesn't have units, it's just a number, so FF
is ignoring it.

Without a doctype FireFox is emulating the buggy behaviour of older
browsers and treats the unitless value as if it was a length with
pixel units.

Change you JavaScript so that it adds px to the end of the value for y
before applying it as a style.

Steve
 
C

carex

Steve,


You are right.
I just updated the script with:

y+=delta;
z=y + "px";
document.getElementById("myDiv").style.left=z;


And it worked !
Thank you so much.
I will go on with xhtml. I think it is worth it.


Best regards,
carex.



Just for info: this error was not detected by the html validator in
Firefox 2.0.
 
S

Steve Pugh

Just for info: this error was not detected by the html validator in
Firefox 2.0.
Click to expand...

There was no HTML error, so that's entirely to be expected. The error
was entirely within the use of JavaScript to update CSS and hence far
outside the ability of a markup validator to detect.

Steve
 
C

cwdjrxyz

Hello,

Since a few weeks I am trying to use xhtml i.s.o html everywhere in my web
application

But, for the first time, I have something that is working perfectly with
IE6 but not in Firefox when I use a DOCTYPE

Here below the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>offset</title>
<script type="text/javascript">
//<![CDATA[
var delta=3;
function move(){
var y=document.getElementById("myDiv").offsetLeft;
if (y > screen.width - document.getElementById("myDiv").offsetWidth) {
delta=-3;
}
if (y < 0) {
delta=3;
}
y+=delta;
document.getElementById("myDiv").style.left=y;
document.getElementById("pos").innerHTML=y;
setTimeout("move()",30);
}
//]]>
</script>
</head>
<body onload="alert(document.compatMode);javascript:move()">
<div id="myDiv" style="position:absolute; left:50px; top:100px; width:200px; height:50px; background-color:blue;">
<h4>That's it damnit !!!(<span id="pos">pos</span>)</h4>
</div>
</body>
</html>

In Firefox, altough there is no error detected, the position is not
updated.
But if I remove the DOCTYPE then it works.

Is it a problem with Firefox ????

Thanks.
carex.
Click to expand...

Others have shown some errors that caused the problem with Firefox,
and you apparently now have corrected your code so that it is working
for Firefox. However a problem remains if you still are using a xhtml
Doctype. No IE browser will support xhtml of any version if properly
served as application/xhtml+xml. You just get an error message. You
have to resort to some tricks, dual codes, etc to get the code to work
on IE. If your code is working on IE, you are not serving it properly
as xhtml. Rather, despite the Doctype, you are just serving it as
html. On the server you have to associate an extension such as .xhtml
with the mentioned mime type for xhtml, since the extension .html is
already associated with the mime type for html on most servers, and if
you want the code to work on IE you also have to resort to some
tricks, often involving a server side code such as php, so IE browsers
see html code, not xhtml code. Mis-serving an xhtml page as html
usually works, but all of the xhtml code is useless, and you would do
better to write the page as html 4.01 strict. If you do not serve your
pages properly as xhtml and do something to handle IE, then rewriting
your code in xhtml is useless and only wastes your time. I do write
and serve many new pages in xhtml. However just writing valid xhtml
code is only the starting point. There is much work to be done on
server side code, etc.

Many who post here do not think all of this is worth the effort, and
for a practical purpose, such as commercial web sites, they have a
point. However if you are as stubborn as I am and have much time to
invest, you likely can use and serve pages in xhtml properly for
browsers that support it and as html 4.01 strict for browsers such as
IE that do not.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

XHTML - how extend/create ELEMENT body in my DTD? 0
Newbie XHTML question. 5
XHTML question 8
Please Help? 0
IE/Firefox XHTML Strict 7
Add recipes using JavaScript in table 20
xhtml strict javascript problem trying to use "id" in plane of "name" attribute 2
xhtml & margin-top 11

Members online

Total: 27 (members: 2, guests: 25)
Robots: 198

Forum statistics

Threads
473,764
Messages
2,569,567
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top