Google Chrome: text will not be minimized

Question

Google Chrome really throws a roadblock at me, and I need help.

I customize the menu and the text wraps around when scaling (<50%). I do not want to use white-space: nowrap, and I cannot make my menu wider. Safari, Firefox, even IE - no problem, but when scaling with chrome, it forces word wrap. Any ideas. Please let me know if more html / css is required, 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 coolness and just started throwing things at it ... it's never good.

Demo: http://jsfiddle.net/X48ng/

^ Open with chrome and zoom out .... you will see (scroll also the text)

John

Answer 1

Ok, I think I see exactly what causes it, but its a bit of a violin with what you want from it,

After messing with the violin, I managed to stop moving the menu items to a new line while increasing to 33% by removing the margin-left in the #menu ul{} element,

As shown here: js Fiddle (still happens when increasing to 25%, but now you can decrease to 33% instead of 50%)

The only thing I can think of is to call this; when the page changes, the border increases or something along these lines,

If someone can help improve this answer, please do.

Steve.