Google Chrome: Text will not minimize correctly - html

Question

Google Chrome is really throwing a roadblock at me and I need some help.
I am setting up a menu and the text is wrapping when zooming out (<50%). I do not want to use white-space: nowrap and I cannot make my menu wider. Safari, Firefox, even IE - no problems however when zooming out with chrome it forces a word wrap. Any ideas. Please let me know if more html/css is needed, i tried to simplify things:
CSS:
#page{
display: block;
overflow:visible;
font:"Times New Roman", Times, serif;
text-align: center;
margin: auto;
width: 100%;
height: 1000px;
background:#956e41;
}
#header{
width:auto;
max-width:1105px;
margin:auto;
position: relative;
overflow:visible;
}
#mainPicture{
height:475px;
width: 1105px;
background-image:url(images/main.jpg);
background-repeat:no-repeat;
margin: auto;
position: absolute;
}
#headerFrame{
height:80px;
margin: auto;
width: 1080px;
background-color: #a15535;
position: relative;
}
#logo{
height: 150px;
width: 340px;
margin: auto;
background-image:url(images/logo.png);
float: left;
}
#menuFrame{
width:auto;
max-width: 740px;
margin: auto;
width: 1080px;
display:inline-block;
}
#menu{
width:auto;
font-size:16px;
font-weight:600;
margin: 0 0 0 0 ;
text-align:right;
display:inline-block;
}
#menu ul{
margin-left: 80px;
}
#menu ul li{
list-style:none;
float:left;
margin: 0 0 0 10px;
padding: 0 10px 10px 0;
}
HTML:
<div id="page">
<div id="header">
<div id="mainPicture"></div>
<div id="headerFrame" class="borderSq">
<div id="logo">
<!--<img src="images/logo.png" />-->
</div>
<div id="menuFrame">
<div id="menu">
<ul>
<li class="border li">menu1<br /><span>text</span></li>
<li class="border li">THE menu1<br /><span>text</span></li>
<li class="border li">menu1<br /><span>text</span></li>
<li class="li">menu1<br /><span>text</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
Some of the CSS may look redundant, i lost my cool and started just throwing stuff at it... never good.
Demo: http://jsfiddle.net/X48ng/
^Open with chrome and zoom out.... you'll see (scroll right too for text)
John

Answer 1

Ok I think i see exactly what is causing it but its a bit of a fiddle with what you want from this,
After messing with the fiddle a bit I managed to stop the menu items being pushed to a new line when zooming out to 33% by removing the margin-left on the #menu ul{} item,
As shown here:
js Fiddle (still happens when zoomed out to 25% but now can zoom out to 33% instead of just 50%)
The only thing I can think of that is causing this is; as the page is resized the margin is being enlarged or something along those lines,
if anyone can help improve this answer, please do.
steve.