Many times when you create horizontal navigation, you prefer that it doesn't wrap down to the next line.
The declaration that is usually added to control this is {white-space: nowrap;} . It should work, but Internet
Explorer 6 for the PC, the browser that more than 80% of people use, has a problem. Similar to what was
seen in Opera previously, as the page gets smaller and the list touches either the left browser chrome or the
list's containing element, the padding in the list will collapse and the text will jump over the background
image. It's really quite ugly.
Previously, when building our list in the HTML document, we made sure not to place any actual spaces
between words, only   , and we made the list ugly. Strangely, this combination works like
{white-space: nowrap;} and keeps IE 6, Opera, and Gecko-based browsers from wrapping down to the
next line, thus circumventing the bug.
There are a few browsers that will still wrap the list if the browser window gets too narrow, Safari and IE 5
Mac are two that I've seen. (They would remain on one line if we could use the nowrap code as it should beused.)

Due to the padding of this list, the wrapping is very unattractive and overlaps the row of buttons
above. We can use a simple fix for this, however. We'll add some line height to force that wrap down below
the first line of buttons.
To the #navbar li selector, add line-height: 28px; . Preview this in one of the affected browsers, or in DW
2004 make your design window smaller, and notice that this allows a button that wraps to go below bottom
of the top line of buttons. However, the line height also causes the top row of buttons to drop down a few
pixels; negative margin to the rescue. Add to your #navbar ul selector this declaration -
9 of 9