Table disappears in IE

[hbmehta]

Hi, I have <div position:relative><table position:relative top left><tr position:relative, top, left></tr></table></div> structure.
I am creating TDs(with position:absolute and top, left properties) dynamically. Everything works fine in FF but table is not at all displaying in IE. I have pested all css, html and js code.

.menuFonts {
font-family: HELVETICA;
color: ffffff;
position: relative;
top: 0px;
left: 0px;
/*table-layout:fixed;*/
/*font-size: 14px;*/
}

.firstLevelMenuRowClass {
height: 46px;
/*width: 100%;*/
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
position: relative;
top: 0px;
left: 0px;
}

.borderClass {
width: 2px;
height: 35px;
text-align: center;
/*overflow: hidden;*/
position: absolute;
background-image: url(../images/Menubar-separator-11px.jpg);
border: 0px;
}
.menuBarItems {
width: 134px;
height: 46px;
text-align: center;
border-left: 1px solid #000033;
border-right: 1px solid #5984a3;
overflow: hidden;
position: absolute;
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
border: 0px;
z-index: 1000;
opacity: 1.0;
filter: alpha(opacity = 100);
}

.menuBarItemsFirstElement {
width: 134px;
height: 46px;
text-align: center;
border-right: 1px solid #5984a3;
overflow: hidden;
position: absolute;
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
border: 0px;
z-index: 1;
}

.menuBarItemsLastElement {
text-align: center;
height: 46px;
border-left: 1px solid #000033;
overflow: hidden;
position: absolute;
background-image: url(../images/Menubar-plus-11pixels.jpg);
background-repeat: repeat;
border: 0px;
z-index: 1;
}

.menuBarItemsColorChangeFirstElement {
text-align: center;
overflow: hidden;
width: 132px;
height: 46px;
background-image: url('../images/Rollover-left.png');
border: 0px;
position: absolute;
z-index: 100;
}

.menuBarItemsColorChangeLastElement {
margin-top: -1px;
text-align: center;
overflow: hidden;
width: 132px;
height: 46px;
verticle-align: middle;
background-image: url('../images/Rollover-right.png');
border: 0px;
}

.menuBarItemsColorChange {
width: 132px;
height: 46px;
border: 0px;
text-align: center;
overflow: hidden;
background-image: url('../images/Rollover-standard.png');
}

html -
<div id="firstLevelMenu" style="position:relative">
<table width="100%" cellspacing="0px" cellpadding="0px" class="menuFonts">
<tr id="firstLevelMenuRow" class="firstLevelMenuRowClass">

</tr>
</table>
</div>

js-
function() {
var tabRow = dojo.byId('firstLevelMenuRow');
var list = new Array();
list[0] = "Agency Sales"; // argument to control array's size)
list[1] = "Company Sales";
list[2] = "Fraud";
list[3] = "Divident Miles";
list[4] = "Contact & Support";
list[6] = "Company Sales";
list[7] = "Fraud";
list[8] = "Divident Miles";
list[9] = "Contact & Support";
list[5] = "Login Time: 00:00:00:00";
var cell = new Array();
var borderCell = new Array();

for ( var i = 0; i < list.length; i++) {
cell[i] = document.createElement("TD");
cell[i].setAttribute("id", "cell" + i);
//cell[i].style.top = "64px";
//cell[i].style.left = (i*132)+"px";
cell[i].style.top = "0px";
cell[i].style.left = ((i*134)+(i*2))+"px";

if (i == 0) {
if (dojo.isIE) {
cell[i].setAttribute("className","menuBarItemsFirstElement");
} else {
cell[i].setAttribute("class","menuBarItemsFirstElement");
}
cell[i].onmouseover = function() {

if (dojo.isIE)
this.setAttribute("className","menuBarItemsColorChangeFirstElement");
else
this.setAttribute("class","menuBarItemsColorChangeFirstElement");
};
cell[i].onmouseout = function() {
if (dojo.isIE)
this.setAttribute("className","menuBarItemsFirstElement");
else
this.setAttribute("class","menuBarItemsFirstElement");
};
} else if (i == list.length - 1) {
if (dojo.isIE) {
cell[i].setAttribute("className","menuBarItemsLastElement");
} else {
cell[i].setAttribute("class","menuBarItemsLastElement");
}
cell[i].onmouseover = function() {
if (dojo.isIE)
this.setAttribute("className","menuBarItemsColorChangeLastElement");
else
this.setAttribute("class","menuBarItemsColorChangeLastElement");
};
cell[i].onmouseout = function() {
if (dojo.isIE)
this.setAttribute("className","menuBarItemsLastElement");
else
this.setAttribute("class","menuBarItemsLastElement");
};
} else {
if (dojo.isIE)
cell[i].setAttribute("className", "menuBarItems");
else
cell[i].setAttribute("class", "menuBarItems");
cell[i].onmouseover = function() {
if (dojo.isIE)
this.setAttribute("className","menuBarItemsColorChange");
else
this.setAttribute("class","menuBarItemsColorChange");
};
cell[i].onmouseout = function() {
if (dojo.isIE)
this.setAttribute("className", "menuBarItems");
else
this.setAttribute("class", "menuBarItems");
};
}
var cellText = document.createTextNode(list[i]);
cell[i].appendChild(cellText);
tabRow.appendChild(cell[i]);

if(i != list.length - 1)
{
borderCell[i] = document.createElement("TD");
borderCell[i].setAttribute("id", "borderCell" + i);
borderCell[i].style.top = "0px";
borderCell[i].style.left = (((i+1)*134)+(i*2))+"px";
if (dojo.isIE) {
borderCell[i].setAttribute("className","borderClass");
} else {
borderCell[i].setAttribute("class","borderClass");
}
tabRow.appendChild(borderCell[i]);
}
}

[limbo]

Hi hbmehta

If you haven't done so already ensure your pages are valid CSS [jigsaw.w3.org]/HTML [validator.w3.org] and that you have included a CSS [developer.yahoo.com] reset in your document head. If there's still a problem then strip you HTML and CSS down the bare basics and we'll have another look.

[hbmehta]

Hi Limbo,

Thanks for the reply. I already figured it out on the same day I posted this one.

Thanks again.

Hardik