I'm trying to create a horizontal nav. I have a container div
specified in pixels, position relative. Its LIs are floated left.
There are ten LIs, each with a width of 9.8%, and a margin-right of
0.2%.
In IE6 and Firefox, this adds up to a nice full-width nav bar, but
in Safari (on PC, v3.0.4) the nav bar stops about 30 pixels shy of
the right-hand side. In Opera (9.25), this is even more pronounced,
with almost a whole tab width remaining.
Here's some code:
<div id="container">
<h1 class="logo"><a href="#">title</a></h1>
<ul class="horiz mainnav clear">
<li class="odd home"><a href="#">Home</a></li>
<li class="even about"><a href="#">About us</a></li>
<li class="odd services"><a href="#">Services</a></li>
<li class="even industries"><a href="#">Industries</a></li>
<li class="odd news"><a href="#">News</a></li>
<li class="even publications"><a href="#">Publications</a></li>
<li class="odd casestudies"><a href="#">Case studies</a></li>
<li class="even community"><a href="#">Community</a></li>
<li class="odd contact"><a href="#">Contact us</a></li>
<li class="even careers"><a href="#">Careers</a></li>
</ul>
</div>
and here's some css
#container {margin:0 auto; padding:0; width:990px; position:relative;}
ul.horiz li {float:left; display:inline;}
ul.mainnav {padding:20px 0 0 0; margin:0; width:100%;}
ul.mainnav li {width:9.8%; text-align:center; font-size:75%;
font-weight:normal; margin-right:0.2%; border-bottom:0.083em solid
#ffffff; border-top:0.417em solid #ffffff;}
ul.mainnav a {padding:0.8em 0; display:block; color:#595A5C;
text-decoration:none;}
ul.mainnav li.even {background-color:#f0f0f0;}
ul.mainnav li.odd {background-color:#e2e3e4;}
Has anyone got any thoughts on this?
Thanks a lot.
--
http://antanova.blogspot.com
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
