CSS Problem on Form Elements in IE

programming web dev
1

My script below addes a new row to a table with form elements. That part works fine in IE and FF. the problem is, the new form elements don’t show any css being applied to them in IE???

function addNewIngredient(){

//Increment the counter and numIngredient
counter++
numIngredients++

try{
	
//Create 1 new row and 2 columns 
var newTr = document.createElement('tr')
var newTd0 = document.createElement('td')
var newTd1 = document.createElement('td')

//Add a new set of text boxes to the ingredients table 
var newInput0 = document.createElement('input')
newInput0.setAttribute('id','amount'+numIngredients)
newInput0.setAttribute('name','amount'+numIngredients)
newInput0.setAttribute('size',10)
newInput0.setAttribute('class','formField')
newTd0.appendChild(newInput0)


var newInput1 = document.createElement('input')
newInput1.setAttribute('id','item'+numIngredients)
newInput1.setAttribute('name','item'+numIngredients)
newInput1.setAttribute('size',60)
newInput1.setAttribute('class','formField')	
newTd1.appendChild(newInput1)


//Create hidden input
var newHiddenInput = document.createElement('input')
newHiddenInput.setAttribute('id','productId'+numIngredients)
newHiddenInput.setAttribute('name','productId'+numIngredients)	
newHiddenInput.setAttribute('type','hidden')	
newHiddenInput.setAttribute('value','')	


//Attach new DOM elements to the new row, then append the row to the existing table
newTr.appendChild(newTd0)
newTr.appendChild(newTd1)
newTr.appendChild(newHiddenInput)


//Append the new row to the table
if(BrowserDetect.browser == 'Firefox'){
	$('ingredients').appendChild(newTr)
}
if(BrowserDetect.browser == 'Explorer'){	
	var tBody = $('ingredients').firstChild;
	tBody.appendChild(newTr)
	//var newrow = $('ingredients').insertRow(-1)
	//newrow.appendChild(newTr)
}

//Add autoSuggest to the new item field
this['as'+numIngredients] = new bsn.AutoSuggest('item'+numIngredients, options);	

}
catch(e){
	//alert(e)
}

}