[nikc121]

First.. I hate IE.. Now that thats said. I am building my first website and I am having issues with making the nav bar appear the same in all browsers. Looks OK in firefox and Safari, Chrome, but It hates IE. The nav bar is suppose to be centered and all drop down buttons in one line.
This is the live website: Example 5

HTML Code:

<div class="main">
  <div class="header_resize">
    <div class="header">

   
        <div id="colortab" class="ddcolortabs">  
<ul>
<li><a href="index.html" title="Home"><span>Home</span></a></li>
<li><a href="members.php" title="Members Only" rel="dropmenu5_a"><span>Members Only</span></a></li>
<li><a href="join.html" title="Join Now"><span>Join NOW</span></a></li>
<li><a href="about.html" title="About" rel="dropmenu1_a"><span>About Us</span></a></li>
<li><a href="awards.html" title="Awards" rel="dropmenu2_a"><span>Awards</span></a></li>	
<li><a href="contact.html" title="Contact"rel="dropmenu3_a"><span>Contact Us</span></a></li>
<li><a href="shop.php" title="Shop"><span>Shop</span></a></li>	
<li><a href="fmnet.html" title="FMNet"><span>FMNet</span></a></li>	
<li><a href="diamond.html" title="Diamond Points"><span>Diamond Points</span></a></li>	
<li><a href="privacy.html" title="Privacy"><span>Privacy</span></a></li>	
<li><a href="links.html" title="Links"rel="dropmenu4_a"><span>Links</span></a></li>		
</ul>
</div>

CSS Code

body {margin:0; padding:0; width:100%; background: url(images/bg3.jpg);background-repeat:repeat;}
html { padding:0; margin:0;}
.main { margin:0 auto; padding:0;}
.header_resize { margin:0; padding:5px; background:url(images/header_bg.gif) top repeat-x;}
.header { width:80%; padding:5px; margin:0 auto;}
.header_blog {color: #ffd700}

Drop Down Code

.ddcolortabs{padding: 0px;width: 80%;margin:auto;
background: transparent;
voice-family: "\"}\"";
voice-family: inherit;
}

.ddcolortabs ul{
font: normal 12px Arial, Verdana, sans-serif;
margin:0;
padding:0px;
list-style:none;
}

.ddcolortabs li{
display:inline;
margin:0 2px 0 0;
padding:0;
text-transform:uppercase;
}


.ddcolortabs a{
float:left;
color: white;
background: black url(media/color_tabs_left.gif) no-repeat left top;
margin:0 2px 0 0;
padding:0 0 1px 3px;
text-decoration:none;
letter-spacing: 1px;
}

.ddcolortabs a span{
float:left;
display:block;
background: transparent url(media/color_tabs_right.gif) no-repeat right top;
padding: 4px 8px 2px 7px;
}

.ddcolortabs a span{
float:none;
}

.ddcolortabs a:hover{
background-color: #ffd700;
}

.ddcolortabs a:hover span{
background-color: #591f20;
}

.ddcolortabs .selected a, #ddcolortabs .selected a span{ /*currently selected tab*/
background-color: #591f20;
}

.ddcolortabsline{
clear: both;
padding: 0;
width: 100%;
height: 8px;
line-height: 10px;
background: black;
border-top: 1px solid #fff; /*Remove this to remove border between bar and tabs*/
}

/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_a{
position:absolute;
top: 0;
border: 1px solid black; /*THEME CHANGE HERE*/
border-top-width: 8px; /*Top border width. Should match height of .ddcolortabsline above*/
border-bottom-width: 0;
font:normal 12px Arial;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_a a{
width: auto;
display: block;
text-indent: 5px;
border-top: 0 solid #678b3f;
border-bottom: 1px solid #678b3f; /*THEME CHANGE HERE*/
padding: 2px 0;
text-decoration: none;
color: black;
}

* html .dropmenudiv_a a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_a a:hover{ /*THEME CHANGE HERE*/
background-color: #8a3c3d;
color: white;
}

[FrankC]

To center a menu, the main <ul> needs a declared width plus a margin:auto, and the page needs a standards mode-invoking doctype. If that doesn't cure, have a look at the tutorials on my signature page.