horizontal Ul navigation not consistent across broswers on zoom-out

Question

I'm experimenting with a horizontal navigation menu by adding a second line (brief description of link) of text inside span tags, which are inside each li anchor.

It behaves as I expect in firefox & IE8, but not in chrome. In chrome,when I zoom out (ctrl -) the far right li drops down below in the ul, increasing the presented ul height.

I've noted these possible causes:

1. I've used span on the text I want to be on the second line with display:block. I didn't know another way to bring it down without using br / in the html.
2. I used float:left on the li's because display:inline didn't work once I added the span mentioned above.

Here is an image of the result in chrome after using ctrl- to zoom out (green background added to see ul).

Here is my html:

<div id="navigation">
<ul>
<li><a href="#item1">first<span>first item desc</span></a></li>
<li><a href="#item2">second<span>second item desc</span></a></li>
<li><a href="#item3">third<span>third item desc</span></a></li>
<li><a href="#item4">fourth<span>fourth item desc</span></a></li>
<li><a href="#item5">fifth<span>fifth item desc</span></a></li>
<li><a href="#item6">sixth<span>sixth item desc</span></a></li>
</ul>
</div>

My css:

body{
 font-size:16px; 
 min-width:984px; 
 *min-width:960px}

#navigation{
background:green; 
width:984px; 
*width:960px; 
min-width:984px; 
 *min-width:960px; 
margin:0 auto; 
padding:0; 
display:block; 
float:left} 

#navigation ul{
margin:0 auto; 
width:100%; 
padding:0; 
list-style-type:none}

#navigation ul li{
float:left; 
margin:0 1px; 
padding:0}

#navigation ul li a{
text-decoration:none; 
font:bold 20px/1em Verdana,Arial,Helvetica,Geneva,sans-serif; 
width:162px; 
*width:158px; 
display:block; 
background:#1b4260; 
color:#cfcfcf; 
margin:0; 
padding:6px 0; 
text-indent:6px}

#navigation ul li a:hover{
background:#2f5c81; 
color:#fff}

#navigation a span{
display:block; 
font:normal 11px Verdana,Arial,Helvetica,Geneva,sans-serif}

What am I doing improperly? Also, any advise to improve this menu's code overall?

Answer 1

It looks like it is a rounding/ratio problem when google zooms.

Regular size (for ul width set to 984px and ul width removed)

ul width - 984px
li a width - 162px
li margin - 2px

(162*6) + (2*6) = 984

Everything fits

Smaller in Chrome (ul width set to 984px in css)

ul width - 820px
li a width - 135px
li margin - 2px

(135*6) + (2*6) = 822

The list items are two pixels wider than your list

Smaller in Chrome (ul width removed)

ul width - 822px
li a width - 135px
li margin - 2px

(135*6) + (2*6) = 822

Everything fits because the ul is two pixels wider than when the width is set on the ul

Why do you have both min-width and width set on the ul?