I have been trying to create a menu in css that is using margin-left: -999em; method. I can get it to work perfectly in firefox. But as soon as I try and load it in any ie I have issues
The problem as soon as I render the page in any ie it looks great but when I press any menu item that has a sub ul it ignores the margin-left: auto; margin-right: auto; in the main and pushes the whole page to the right on the screen.
Below is what I have in my css sheet.Any advice would be greatly appreciated.
* {min-height:1px;}
body {border:0;
margin:0;
padding:0;
background:#ffffff url("") 0 0 repeat-x;
font-family:Arial,Times,"Times New Roman",serif;
font-size:14px;
line-height:1.5em;
color:#000000;
}
/*wraps around everything*/
#main {
width:932px;
margin: 10px;
margin-left: auto;
margin-right: auto;
}
/* Header this is before the menu div */
#header {
postion:relative;
width:932px;
height:200px;
background:#fff url("design/logo.gif") 0 0 no-repeat;
color:#ffffff;
}
/* Main menu this raps around the tab div (tabs) */
#menuDiv{
float:left;
width:932px;
margin:0 0 0 1px;
padding:0;
background:#ffffff url("design/menu1-2.gif") 0 0 no-repeat;
}
#tabs{
min-height: 30px;
margin-left:16px;
width:899px;
background-color:#bfbfbf;
}
#tabs ul{
list-style: none outside none;
}
#tabs li{
float:left;
position: relative;
}
#tabs li ul li{
width:150px;
}
#tabs li ul {
margin-left: -999em;
position: absolute;
}
#tabs li.current_page_item ul{
margin:0;
padding:0;
}
/* Content */
#content {
float:left;
}
/* Footer */
#footer {position:relative; clear:both; width:932px; height:165px; margin-bottom:50px; background:url("design/footer.gif") 0 0 no-repeat; color:#ccc;}