How to avoid CSS Nav Menu line-wrapping?

Posted: Fri, 2006-02-10 07:02

Hello everyone! Another "newbie" question as I prepare to roll-out my mapping firm's new web site in a few weeks.....

We are using a horizontal CSS nav bar on our site template, and I've notice an annoying, important problem with certain users who have lots of extra "junk" displayed in their browser window that steals precious pixels away from an 800 pixel-wide standard. The menu I have created, which was (I thought) safely set to 750 pixels wide, will have 1-2 buttons "wrap" down to the next line....beneath the other buttons on the left hand edge of the page. Definitely an aesthetic problem but it gets worse! When the buttons wrap underneath one another, the "upper" buttons no longer display their drop-down contents.

For an example of what I am talking about, you may visit: http://www.tonnhaus.com/temp/mapformation/aboutus/clients/clients.html

If you resize the browser window to less than 775-750 pixels wide, you can see the problem I am talking about.

My CSS code looks like this:

#menu{ 
width:100%; 
float:left; 
} 
 
#menu a, #menu h2{ 
font:bold 11px/16px arial,helvetica,sans-serif; 
display:block; 
border-width:1px; 
border-style:solid; 
border-color:#ccc #888 #555 #bbb; 
white-space:wrap; 
margin:0; 
padding:1px 0 1px 3px; 
} 
 
#menu h2{ 
color:#fff; 
background:#000 no-repeat 100% 100%; 
text-transform:lowercase; 
z-index:500; 
} 
 
#menu a{ 
background:#eee; 
text-transform:lowercase; 
z-index:500; 
} 
 
#menu a, #menu a:visited{ 
color:#CC0000; 
text-transform:lowercase; 
z-index:500; 
} 
 
#menu a:hover{ 
color:#CC0000; 
background:#ddd; 
z-index:500; 
} 
 
#menu a:active{ 
color:#CC6600; 
background:#ccc; 
z-index:500; 
} 
 
#menu ul{ 
list-style:none; 
margin:0; 
padding:0; 
float:left; 
width:107px; 
z-index:500; 
} 
 
#menu li{ 
position:relative; 
z-index:500; 
} 
 
#menu ul ul{ 
position:absolute; 
top:auto; 
display:none; 
z-index:500; 
} 
 
#menu ul ul ul{ 
top:0; 
left:100%; 
z-index:500; 
} 
 
/* Begin non-anchor hover selectors */ 
 
/* Enter the more specific element (div) selector 
on non-anchor hovers for IE5.x to comply with the 
older version of csshover.htc - V1.21.041022. It 
improves IE's performance speed to use the older 
file and this method */ 
 
div#menu h2:hover{ 
background:#000 no-repeat -999px -9999px; 
z-index:500; 
} 
 
div#menu li:hover{ 
cursor:pointer; 
z-index:500; 
} 
 
div#menu li:hover ul ul, 
div#menu li li:hover ul ul, 
div#menu li li li:hover ul ul, 
div#menu li li li li:hover ul ul 
{display:none;} 
 
div#menu li:hover ul, 
div#menu li li:hover ul, 
div#menu li li li:hover ul, 
div#menu li li li li:hover ul 
{display:block;} 
 
/* End of non-anchor hover selectors */ 
 
/* Styling for Expand */ 
 
#menu a.x, #menu a.x:visited{ 
font-weight:bold; 
color:#000; 
background:#eee no-repeat 100% 100%; 
z-index:500; 
} 
 
#menu a.x:hover{ 
color:#a00; 
background:#ddd; 
z-index:500; 
} 
 
#menu a.x:active{ 
color:#060; 
background:#ccc; 
z-index:500; 
} 
 
a:link {color: #CC0000;} 
a:visited {color: #CC0000;} 
a:hover {color: #CC6600;} 
a:active {color: #CC0000;} 
 
#content { 
width: 750px; 
background: #fff; 
align: left; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 13px; 
z-index: 100; 
}

If anyone can help me with that problem....EITHER preventing the buttons from dropping down on to a second line (setting "minimum width"?) or having the contents of the "upper" buttons appear on top of the second line of "wrapped" buttons, I would greatly appreciate it. I tried a few searches of the CSS Forum for an answer to this particular question, but no matches (that I was able to locate). Thanks!

Derek