nowrap css menus

[jackvull]

Hi
I have some PHP code that produces some css menus with drop downs. Unfortunately, when the browser window is made smaller, the menus seem to wrap onto the next line. I have tried the nowrap attribute and also whitespace: nowrap in the css that is used but it doesn't seem to work. Any ideas or suggestions?

There is some SQL, which populates all of this written before.

echo "<div STYLE='position:absolute;top:160; left:220; z-index:6000;' >";
echo "<br />&#160Click...blah blah blah:";

echo "<ul id='nav'>";

$i=0;
while ($i < $num2) {
$a = mysql_result($result2,$i,"a") or die(mysql_error());
$b = mysql_result($result2,$i,"b") or die(mysql_error());
$c = mysql_result($result2,$i,"c") or die(mysql_error());
$d = mysql_result($result2,$i,"d") or die(mysql_error());

echo " <li><a>".$a."</a>
<ul>
<li><a href='audio.php?a=".$a."'>Submenu 1</a>
</li>
";

if ($b > 0)
{
echo "<li><a href='audio.php?b=".$b."'>Submenu 2</a></li>";
}

if (strlen($c) > 2)
{
echo "<li><a href='audio.php?c=".$c."'>Submenu 3</a></li>";
}

echo "
</ul>
</li>";

$i++;

} //end while loop

echo "</ul>";
echo "</div>";

[encyclo]

As the browser only sees the generated markup, could you post a short and relevant example of the menu resulting from your above code. Also, could you post the section of CSS which relates to it?

nowrap

is usually pretty reliable unless there is something else interfering with it.

[RayofTennessee]

You may also consider doing your navigation with a display block style and applying a fixed width to the box. Also if you use px instead of em when adding text into your navigation menus you should not have any issues with text scalling if the end user has changed their font settings from normal to large or even worst largest.

[jackvull]

Thanks - I'll have a go at that. In the meantime, here is the HTML:
<div STYLE='position:absolute;top:160; left:220; z-index:6000;' ><br />&#160Click on the following links:
<ul id='nav'> <li><a>DJ 1</a>
<ul>
<li><a href='a.php?DJID=1'>Mixes</a>
</li>
<li><a href='a.php?DJID=1&Top20=Load&Yr=Load'>Current Top 10</a></li>
</ul>
</li> <li><a>DJ 2</a>
<ul>
<li><a href='a.php?DJID=2'>Mixes</a>
</li>
<li><a href='a.php?DJID=2&Top20=Load&Yr=Load'>Current Top 10</a></li>
</ul>
</li> <li><a>DJ 3</a>
<ul>
<li><a href='a.php?DJID=3'>Mixes</a>
</li>

</ul>
</li> <li><a>DJ 4</a>
<ul>
<li><a href='a.php?DJID=4'>Mixes</a>
</li>

</ul>
</li></ul></div>

and here is the CSS:
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
color: black;

}

#nav a {
display: block;
width: 10em;

color: yellow;
background: blue;
font-weight :bold;
padding: 3px;
border: 1px solid #ccc;
border-bottom: 0;
text-decoration: none;

}

#nav a:hover {
display: block;
width: 10em;

color: yellow;
background: 0099FF;
font-weight :bold;
padding: 3px;
border: 1px solid #ccc;
border-bottom: 0;

}

#nav li {
float: left;
width: 10em;

position: relative;
border-bottom: 1px solid #ccc;

}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;

color: #777;
background: #fff;
padding: 0px;
border: 1px solid #ccc;
border-bottom: 1px solid #ccc;

}

#nav li:hover ul, #nav li.sfhover ul {
left: auto;

}

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

[jessejump]

Put a width on the div - try 760 px - also your values need to have px added to them