Unwanted vertical HTML text - premature shrink wrap effect

I've encountered this only on Drupal websites, so it may have to do with the either the Zen or Garland theme default CSS. However, for the life of me I cannot determine why it continues to happen, at random.

The best way to explain is to view the image here. This happens regardless of my word-wrap and white-space CSS settings, and only at random. Sometimes it's one element, sometimes it's another (here it has happened 开发者_如何学Pythonbetween 'Our Brand' and 'Submit' in the menu).

The image attached is an inline <ul> with links inside each <li>.

Any insight would be much appreciated!

Here is a sample of styling for the menu shown in the screenshot:

<style type="text/css">

#navbar { float: left; height: 32px; overflow: hidden; margin-left: 0px; margin-right: -100%; padding: 0px; width: 100%; }

#navbar ul { margin: 0px; padding: 0px; text-align: left; }

ul.links li { display: inline; list-style-type: none; padding: 0px 0.5em; }

#navbar li { float: left; padding: 0px 20px 0px 0px; }

#primary a { text-decoration: none !important; white-space: pre !important; }

</style>

Have a look at the actual page sourse (not using firebug) make sure the text is entered normally. The use of white-space: pre; will cause it to preserve whitespace. It should be white-space:nowrap;