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.

Wenzel

Answer 1

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.

Mac

Answer 2

• Using !important in CSS will override the above JavaScript and the width will not change. ie.

  width: 16.5% !important;

• Should become:

  width: 16.5%;

Sterilant

Answer 3

You can use:

document.getElementById("td").style.visibility="hidden";
document.getElementById("td").style.display="none";

instead of width property.

It works!

Lynn

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. – Wenzel