Adding a new row (looks great in Firefox, not so much in IE)

Hi,

This might be a javascript questions since javascript is actually creating the row, but since the problem isn't creating the row but rather the display, I thought I'd start here first...

Clicking the add new row button works perfectly in Firefox. When I add a new row in IE6 and IE7 only the first row adds correctly... the quantity field adds correctly each time but the others don't.

Any ideas? I have attached my code and screen shots. I understand that I should not have my style information included with the html but I take that out after I get the page working the way it is supposed to.

HERE IS THE STYLE CODE
<style type="text/css">
#quickShopHeadings{
width: 950px;
font-weight: bold;
float: left;
border-bottom: 1px solid;
}
#quickShopForm {
width: 950px;
padding-bottom: 10px;
float: left;
background: #E5E1D9;
}

#quickShopHelp {
width: 300px;
clear: both;
float: left;
padding-top: 10px;
padding-left: 5px;
padding-right: 5px;
background: #EEEEEE;
}

#qsInfo{
clear: both;
float: left;
width: 100%;
}

#quickShopHelp p,
#qsInfo p{
padding-top: 5px;
padding-bottom: 5px;
}

#quickShopHelp .helpHeader{
font-weight: bold;
}

#quickShopHeadings ul,
#quickShopForm ul{
list-style: none;
}

#quickShopHeadings li{
background: #CAC4B4;
}

#quickShopForm li{
padding-top: 10px;
}

.qsQuantity{
display: block;
clear: both;
float: left;
width: 60px;
padding-left: 5px;
}
.qsNameHeading{
display: block;
float: left;
width: 735px;
}

.qsItemNumber{
display: block;
float: left;
width: 150px;
}

.qsName{
position: relative;
display: block;
float: left;
}

.qsChoice,
.qsStartOver{
display: block;
float: left;
padding-left: 10px;
}

.qsButton{
display: block;
float: left;
padding-left: 10px;
}
</style>

HERE IS THE HTML/JAVA CODE
<div id="quickShopHeadings">
<ul>
<li class="qsQuantity">Quantity</li>
<li class="qsItemNumber">Item Number</li>
<li class="qsNameHeading">Name</li>
</ul>
</div>

<div id="quickShopForm">
<form id="quickShopItems" name="quickShopItems" method="post" action="">
<input type="hidden" name="activity" id="activity" value="" />
<input type="hidden" name="listName" id="listName" value="" />
<input type="hidden" name="howmany" id="howmany" value="" />

<%
nt rowCount = 0;
or (int x = 1; x < 7; x++)
{
rowCount = rowCount + 1;
%>
<ul id="quickShopList">
<li class="qsQuantity"><%=x%> <input type="text" name="quantity_<%=x%>" id="quantity_<%=x%>" size="2" value="" /></li>

<li class="qsItemNumber"><input type="text" name="prefix_<%=x%>" id="prefix_<%=x%>" size="3" value="" /> - <input type="text" name="partNumber_<%=x%>" id="partNumber_<%=x%>" size="9" value="" onblur="javascript:ajax_checkItemNumber('<%=x%>')" /></li>

<li id="itemName_<%=x%>" class="qsName">&nbsp;</li>
<li id="choice2_<%=x%>" class="qsChoice">&nbsp;</li>
<li id="choice3_<%=x%>" class="qsChoice">&nbsp;</li>
<li id="choice4_<%=x%>" class="qsChoice">&nbsp;</li>
<li id="clearButton_<%=x%>" class="qsStartOver" style="display: none"><input type="button" value="Clear" name="ClearChoices" onclick="StartOver('<%=rowCount%>')"/></li>
</ul>
<%
}
%>
<ul id="newRows"></ul>

<ul id="formButtons" style="clear: both; float: left;">
<li class="qsButton"><input type="button" value="Add to Shopping Cart" onclick="javascript:quickShop('quickShopItems', 'quickShopCart', 'AddToCart?')" /></li>
<li class="qsButton"><input type="button" value="Add Another Row" onclick="javascript:addQuickShopRow()" /></li>

</ul>
<input type="hidden" id="rowCount" name="rowCount" value="<%=rowCount%>" />
</form>
</div>

HERE IS THE JAVASCRIPT
function addQuickShopRow()
{
//Purpose: Adds a new quickshop <li> to the quickshop form
var newList = document.getElementById('newRows');
var rowNumber = document.getElementById('rowCount').value;
var newRowNumber = parseInt(rowNumber) + 1;

// Create the Quantity Row
var quantityLI = document.createElement('li');
quantityLI.className = "qsQuantity";
quantityLI.innerHTML = newRowNumber + "<input type='text' name=\"quantity_"+newRowNumber+"\" id=\"quantity_"+newRowNumber+"\" size='2' value='' />";

newList.appendChild(quantityLI);

// Create the Item Number Row
var itemNumberLI = document.createElement('li');
itemNumberLI.className = "qsItemNumber";
itemNumberLI.innerHTML = "<input type='text' name=\"prefix_"+newRowNumber+"\" id=\"prefix_"+newRowNumber+"\" size='3' value='' /> - <input type='text' name=\"partNumber_"+newRowNumber+"\" id=\"partNumber_"+newRowNumber+"\" size='9' value='' onblur='javascript:ajax_checkItemNumber("+newRowNumber+")' />";

newList.appendChild(itemNumberLI);

// Create the Item Name Row
var itemNameLI = document.createElement('li');
itemNameLI.className = "qsName";
itemNameLI.id = "itemName_" + newRowNumber;
itemNameLI.innerHTML = "&nbsp;";

newList.appendChild(itemNameLI);

// Create the Choice Rows
var choice2LI = document.createElement('li');
choice2LI.className = "qsChoice";
choice2LI.id = "choice2_" + newRowNumber;
choice2LI.innerHTML = "&nbsp;";

newList.appendChild(choice2LI);

var choice3LI = document.createElement('li');
choice3LI.className = "qsChoice";
choice3LI.id = "choice3_" + newRowNumber;
choice3LI.innerHTML = "&nbsp;";

newList.appendChild(choice3LI);

var choice4LI = document.createElement('li');
choice4LI.className = "qsChoice";
choice4LI.id = "choice4_" + newRowNumber;
choice4LI.innerHTML = "&nbsp;";

newList.appendChild(choice4LI);


// Create the clear button
var clearButton = document.createElement('li');
clearButton.className = "qsStartOver";
clearButton.id = "clearButton_" + newRowNumber;
clearButton.style.display = "none";
clearButton.innerHTML = "<input type='button' value='Clear' name='ClearChoices' onclick='StartOver("+newRowNumber+")' />";

newList.appendChild(clearButton);

document.getElementById('rowCount').value = newRowNumber;
}

 

Here is a picture of what it looks like when it is working... I get valid item options using ajax... just an FYI

 

any thoughts on how to solve this? ttt.

 

Still looking for help...

 

Have you got a live example?

 

no live example unfortunately... i'm developing everything locally. maybe i'll have to wait until the new server is up and then revisit this issue later if no one can help me...