Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript style.width not working in firefox with transitional doctype

I have a script that animates a small DIV popping up on the page. It all works fine in IE, and in FF if I remove the DOCTYPE, but when the DOCTYPE is XHTML/Transitional, in Firefox, the width does not change.

this.container.style.visibility = "visible";
alert("this.container.style.width before = " + this.container.style.width)
this.container.style.width = this.width;
alert("this.container.style.width after = " + this.container.style.width); 
this.container.style.height = this.height;

In IE, and in FF with no DOCTYPE, the first alert says 0, and the second says 320 (which is the width set elsewhere in the code)

in FF, with the DOCTYPE to XHTML/Transitional, both alerts show 0. Any idea what's going on here? I'm thinking I may need to explicitly set positions on the DIVs in Transitional, but I'm not sure.

like image 936
nerdabilly Avatar asked Dec 08 '08 15:12

nerdabilly


1 Answers

Have you tried setting:

this.container.style.visibility = "visible";
alert("this.container.style.width before = " + this.container.style.width);
this.container.style.width = this.width + 'px';
alert("this.container.style.width after = " + this.container.style.width);
this.container.style.height = this.height + 'px';

//Note the 'px' above

I find that trying to set a width/height of a number, without the units can cause issues.

like image 70
scunliffe Avatar answered Oct 24 '22 03:10

scunliffe