|
|
Posted by Steve Pugh on 11/20/07 13:43
On Nov 20, 12:22 pm, carex <ca...@skynet.be> wrote:
> 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 ????
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
[Back to original message]
|