javascript style.width not working in firefox with transitional doctype

Question

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.

Solution

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.

Comments

[nerdabilly]

I can't really remember now since this was 4 years and 5 jobs ago, but I think the reason I didn't use this method is because I was animating the div appearing and it needed to start at 0 and move to 320. This is another good method for hiding elements though.