I have built a menu using CSS as described in the article
http://www.alistapart.com/articles/slidingdoors2/Everything works ok except for one detail. When the browser window width is smaller than the width of the entire menu, the menu wraps to the next line. In an effort to prevent this, I have added the "white-space: nowrap" style to the UL, but it isn't working. Any ideas on how I can prevent the menu from wrapping?
Here is a simple example of just the menu. Resize the browser until it wraps and you will see the problem.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Menu</title>
<style type="text/css">
DIV.menu
{
float : left;
width : 100%;
background : #FFFFFF url(/images/menuBorder.gif
) repeat-x bottom;
}
DIV.menu UL
{
margin : 0px;
padding : 0px;
list-style : none;
white-space : nowrap;
}
DIV.menu LI
{
display : inline;
margin : 0px;
padding : 0px;
}
DIV.menu A
{
float : left;
background : url(/images/menuRight.gif)
no-repeat right top;
border-bottom : 1px solid #000;
font-weight : bold;
text-decoration : none;
}
DIV.menu A:hover
{
background-position: 100% -150px;
}
DIV.menu A:link, DIV.menu A:visited,
DIV.menu A:active, DIV.menu A:hover
{
color : #000000;
}
DIV.menu SPAN
{
float : left;
display : block;
background : url(/images/menuLeft.gif) no-repeat left top;
padding : 5px 9px;
white-space : nowrap;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
DIV.menu SPAN {float : none;}
/* End IE5-Mac hack */
DIV.menu A:hover SPAN
{
background-position: 0% -150px;
}
DIV.menu LI#current A
{
background-position: 100% -150px;
border-width : 0px;
}
DIV.menu LI#current SPAN
{
background-position: 0% -150px;
padding-bottom : 6px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="/"><span>Home</span>
</a></li>
<li><a href="#"><span>Page 1</span></a></li>
<li id="current"><a href="/"><span>Page 2</span></a></li>
<li><a href="#"><span>Page 3</span></a></li>
<li><a href="#"><span>Page 4</span></a></li>
<li><a href="#"><span>Page 5</span></a></li>
</ul>
</div>
</body>
</html>
Start Free Trial
