I'm trying to create a horizontal menu that's centered within a main container
div. I have the main div width set to 50em and would like the menu to be around
32em wide. I'm getting close to the desired outcome, but there's still a couple
of flaws. Here's the code
HTML
<div id="main">
<img src="Images/ESS_Large.gif" alt="ESS Logo">
<div id="menu">
<ul>
<li class="left"><a href="#">Home</a></li>
<li class="left"><a href="#">Services</a></li>
<li class="left"><a href="#">About Us</a></li>
<li class="right"><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
CSS
body{text-align:center;background:#039;}
#main{width:50em;background:white;margin-left:auto;margin-right:auto;}
#menu ul {list-style:none;padding:0;margin:0;margin-left:9em;}
#menu ul li {position:relative;float:left;width:8em;background:#C90;}
.left{border-style:solid;border-color:#039;border-width:0.09em 0 0.09em 0.09em;}
.right{border:0.09em solid #039;}
#menu a{color:#039;text-decoration:none;font-weight:bold;}
It seems to work in IE, but in NS and FF there are a couple of problems.
1. There's a gap in the center of the menu
2. The bottom and righ border are thicker than the top and left
3. The main div doesn't extend to the menu and below. I know this will fix
itself when content is added, but I don't want to run into problems down the
road.
Brian
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
