I had been trying to find on internet similar code for Mozilla.The following code is for IE.The Html is not generated properly for Mozilla.

The problem is:

There are two columns each in row.
Each column has few entries.The entries can be moved from one column to another by clicking on the buttons between these colums.
Suppose i try to move few entries from column 2 to column 1,then in row 2 the two columns are aligned one over the other rather than adjacent to each other.It is expected that adjacent alignment of columns doesnot change.

Similar if i try to move entries from one column to other in row 2 the columns in row are aligned one over the other while they should be aligned adjacent.
This problem is only in Mozilla ,not Internet EXplorer:
Kindly give some suggestions for the code.Any suggestion would be appreciated.

function moveToAdd(fbox,tbox) {
if (fbox.selectedIndex == -1) {
alert('Select the field(s) to be added...');
}
else if(document.forms[0].AllGroup.selectedIndex==-1){
alert('Add the group name before adding the field...');
}
else{
var selectedGroup = document.forms[0].AllGroup.selectedIndex;
var fieldLen = groupValue[selectedGroup].length++;
for(var i=0; i<fbox.options.length; i++) {
if (fbox.options[i].selected && fbox.options[i].value != "") {
var no = new Option();
no.value = fbox.options[i].value;
no.text = fbox.options[i].text;
tbox.options[tbox.options.length] = no;
fbox.options[i].value = "";
fbox.options[i].text = "";
}
}
BumpUp(fbox);
BumpUp(tbox);
for(var i=0; i<tbox.options.length; i++) {
groupValue[selectedGroup][i] = tbox.options[i].value;
groupText[selectedGroup][i] = tbox.options[i].text;

}
}
} //moveToAdd ends