CSS cannot be applied to a form element through javascript, if doctype is set

Question

i have textbox like this:

<input id="patId1" type="text" name="patId1" value="">

when the page loads, a script is called which sets the width of the textbox. That code is as follows :

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth;

where, patId2 is a dropdown list (select tag). Basically what i am trying to do is setting the width of textbox same as that of the width of dropdown list.

Now, if DOCTYPE is set, then the above script doesn't work. But if it is not set, the width is applied.

Any help.

Answer 1

The value of offsetWidth will be a Number. The CSS width property accepts a length. Lengths (other than 0) must have units. In quirks mode, browsers violate the CSS specification and assume px units.

document.getElementById("patId1").style.width = document.getElementById("patId2").offsetWidth + 'px'