My horrible Horizontal menu in IE

liunx

Guest
This is my StyleSheet

#menuBox {
background-color: #FFAA24;
border-bottom: 1px solid #60381C;
height:17px;
width:100%;
display:table;
}
#menuBoxRow {
display:table-row;
height:17px;
}
#menuBoxCell {
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bolder;
color: #fff;
text-decoration: none;
display:table-cell;
vetical-align:middle;
border-left: 1px solid #60381C;
border-right: 1px solid #60381C;
height:17px;
width:14%;
}


This is my page:
<div id="menuBox">
<div id="menuBoxRow">
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#about">About Us</a></div>
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#services">Services</a></div>
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#prod">Our Products</a></div>
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#acc">Accessories</a></div>
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#colors">Colors</a></div>
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#lines">Product Lines</a></div>
<div id="menuBoxCell"><a href=http://www.webdeveloper.com/forum/archive/index.php/"#contact">Contact</a></div>
</div>
</div>

Why doesn't this appear as a horizontal nav on IE?

Any help is greatly appreciated. I would prefer not to dive into Lists and List Items.

Thanks folks.Try doing this instead
ul
{list-style-type:none;}
li
{list-style-type:none; display:inline;}
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#about">About Us</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#services">Services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#prod">Our Products</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#acc">Accessories</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#colors">Colors</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#lines">Product Lines</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#contact">Contact</a></li>
</ul>Thanks, that worked. I was expecting the List Item method to contain more coding. I know I have to style the links now, but that's cool. From what I see here, "diplay:inline;" is what is causing the list items to appear horizontally?

Thanks man!!Yes, display:inline; makes list items run horizontally.Any way for me to remove the indent caused by the UL tag?

Thanks.Try
ul
{list-style-type:none; padding:0; margin:0;}Ah! Amazing. Thanks!!!You're Welcome
 
Back
Top