link in menu breaks

[Auke]

I have a problem in my menu.
Links containg two words break like this:

instead of "log in"
it displays:
"Log
in"

Whats happening?

The HTML


<table width="670" border="0" cellspacing="0" cellpadding="0" id="topmenu">
<tr>
<td>
<ul id="menu">
<li class="menu1"><a href="http://localhost/klanten/www.club3d.nl/">Home</a></li>

<li class="menu2"><a href="javascript:void()">Company</a>
<ul id="sub">
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/company/profile">Profile</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/company/strategy">Strategy</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/company/jobs">Jobs</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/company/contact">Contact</a></li>
</ul>
</li>

<li class="menu3"><a href="javascript:void(0)">Products</a>
<ul id="sub">
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/products/graphics">Graphics</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/products/zaptv">ZAPTV</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/products/theatron/home">Theatron</a></li>
<!-- <li><a href="http://localhost/klanten/www.club3d.nl/index.php/products/accesoires">Accessories</a></li>-->
</ul>
</li>
<!-- -->
<li class="menu4"><a href="javascript:void(0)">Support</a>
<ul id="sub">
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/support/faq">FAQ</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/support/drivers">Drivers</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/support/manuals">Manuals</a></li>
<li><a href='javascript:void(0);' onclick="window.open('http://localhost/klanten/www.club3d.nl/index.php/support/glossary', '_blank', 'width=250,height=300,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');">Glossary</a></li>
</ul>
</li>

<li class="menu5"><a href="javascript:void(0)">News</a>
<ul id="sub">
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/news/company">Company</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/news/products">Products</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/news/awards">Awards</a></li>
</ul>
</li>
<li class="menu6"><a href="javascript:void(0)">Shop</a>
<ul id="sub">
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/wheretobuy/online">Online</a></li>
<li><a href="http://localhost/klanten/www.club3d.nl/index.php/wheretobuy/reseller">Reseller</a></li>
</ul>
</li>
<li class="menu7"><a href="http://localhost/klanten/www.club3d.nl/index.php/search/search">Search</a></li>

<li class="menu8"><a href="http://localhost/klanten/www.club3d.nl/index.php/partner/login">Log in</a></li>

</ul>
</td>
</tr>
</table>



My css:


table#topmenu ul#menu{ /* menu list */
display: block;
float: left;
border:#666 solid 1px;
padding: 2px 0 2px 0;
height:1.3em;
font-size:12px;
font-weight:bold;
list-style: none;
}

table#topmenu ul { /* sub lists */
padding: 10px 0 2px 0;
margin: 0;
background-color:#000000;
list-style: none;
}

table#topmenu li { /* alle list items */
padding: .0em 1.8em .2em 1.7em;
float: left;
position: relative;
width: 0.5em;
display:block;
}

table#topmenu ul#sub li { /* alle list items */
padding: .0em 1.8em .2em 1.7em;
float: left;
position: relative;
width: 2.5em;

}


li ul { /* sub items */
display: none;
position: absolute;
top: 1.0em;
left: 0;
}

li>ul { /* postitie resetten voor alle browsers behalve IE */
top: auto;
left: auto;
}

li:hover ul, li.over ul { /* lists nested onder hovered list items */
display: block;
}

li a:link, li a:visited{
color: #fff;
text-decoration: none;
font-weight:bold;
}

li a:hover{
color: #b3b3b3;
font-weight:bold;
}
table#topmenu ul#menu ul#sub{
margin: 5px 0 0 0;
padding: 4px 0 5px 0;
}
ul#sub li a{
color: #fff;
text-decoration: none;
font-weight:normal;
}

ul#sub li a:hover{
color: #b3b3b3;
font-weight:normal;
}


annybody an idea?

Thanks!

[sticks464]

Offhand without all your code and styles I would say it's the mixing of em's and pixels in the padding off the sub menu. You should either stick with em's or pixels.

[WebJoel]

You should be able to mix "px" and "em" without any conflict albeit "em" makes it 'resizeable' and 'px' does not. Mix-an'-match while it looks odd, is quite okay.
I note that "Log In" is the only entry with a 'white-space' in the text, so either define a width for all <li>, or wrap the "Log In" like this:

<span style="white-space:nowrap;">Log In</span>

that will force the <li> to 'expand' to accomodate whereas it otherwise wants to do virtual wrap when it comes to the end of "Log"...