This is my menu bar at 100% on my browser:
And this is what happens at certain zoom levels and some other browsers:
Here's a simplified version on fiddle: http://jsfiddle.net/heetertc/ARGm8/6/
<div id="bar">
<div id="center-menu">
<ul id="nav">
<li><a href="/about/">ABOUT</a></li>
<li><a href="/bacharach-institute/">THE INSTITUTE</a></li>
<li><a href="/renaissance-pavilion/">RENAISSANCE PAVILION</a></li>
<li><a href="/day-rehab/">DAY REHAB</a></li>
<li><a href="/outpatient-services/">OUTPATIENT SERVICES</a></li>
<li><a href="/therapy-centers/">THERAPY CENTERS</a></li>
<li><a href="/blog/">NEWS</a></li>
<li><a href="/contact/">CONTACT</a></li>
</ul>
<div class="clear"></div>
</div>
</div>
<style type="text/css">
ol, ul {
list-style: none outside none;
}
#bar {
height: 50px;
left: 0;
margin-top: 8px;
position: absolute;
width: 100%;
}
#bar ul {
text-align: center;
}
#center-menu{
height: 50px;
margin: 0 auto;
width: 954px;
}
#nav {
list-style: none outside none;
margin-bottom: 0;
margin-top: 0;
padding-top: 0;
width: 100%;
}
#nav li {
border-left: 1px solid #0c4b89;
display:block;
float:left;
height: 50px;
line-height: 50px;
padding-top: 0;
position:relative;
z-index:500;
}
#nav li a {
color: #FFFFFF;
display: block;
font-size: 12px;
font-weight: bold;
height: 50px;
padding-left: 18px;
padding-right: 18px;
text-align: left;
text-decoration: none;
text-shadow: 0 1px 1px #000000;
}
#nav > li:last-child {
border-right: 1px solid #0C4B89;
}
</style>
I'm sure this is something really easy, but I've been at it for a few days and tried many different things, including many attempts of resizing.
So why does the last element skip down to the next level, but only at different zooms? When I resize it to fit one zoom level, it looks completely different in another. Is there a way to get this to always fill the 954px #bar element no matter the zoom?