Dynamicly Created Text Box won't take class attribute

[dlite922]

i have a table in which i create the rows dynamically with JS.

Everythings works except my sizes are off. they are controlled via CSS class "field1" to "field8"

Here's the code where i set the class, just like any other attribute, id, name, onBlur...

 
var vDesc = document.createElement('input');
  vDesc.type = 'text';
  vDesc.name = 'violationDescription[]';
  vDesc.id = 'vDesc' + numRows;
  vDesc.tabindex = tabIndex++;     //don't worry about ++
  vDesc.value = "";
  vDesc.class = "field6";                //<------- does not work
  var cell = row.insertCell(1); 
  cell.appendChild(vDesc); 
 
 

weather i change it to field 2 or 8, the text box appears as a standard size.

It is NOT a css problem, because on refresh the textboxes that are there by default display the correct size.

i could do this, but haven't tried
vDesc.style.size = "";

However that defeats the point of putting all formatting in a CSS file.

Anybody know why Firefox 2.0 disregards the class?

(can't test in IE6/7 yet because its got other issues)

[Logician]

 
vDesc.class = "field6";                //<------- does not work
 

vDesc.className = "field6";

[dlite922]

vDesc.className = "field6";

that worked. i got it from the manual as well, just didn't test it until now.

Just in case someone else comes accross this, i attempted to modify the style and you'll run into a problem with attributes that have dashes in them such as

document.something.style.text-align = "right"

They've enabled these properties in hungarian case, to work you must change text-align to textAlign.

document.something.style.textAlign = "right";

(for the sake of google keyword search & linking:
background-color = backgroundColor
border-color = borderColor
border-width = borderWidth
etc....)