Tekst in menubalk loopt in elkaar over

[Karel]

Hoi,

Wat ik al eerder zag in Safari zie ik nu ook in de net geupdate IE 9. Namelijk dat de teksten van de menubalk in elkaar overlopen. In eerste instantie dacht ik het op te lossen door minder tekst te plaatsen en meer loze ruimte te reserveren maar helaas dat bleek geen oplossing. Ik weet echt niet hoe het op te lossen.

Voorbeeld waar het fout gaat is http://www.single-reizen-online.nl/
Voor menubalk:
html:
<div id=fullcontainer2>
<div class=centered>
<ul class=mainmenu>
<li><a class="selected" href="http://www.single-reizen-online.nl/">HOME</a></li>
<li><a class="" href="http://www.single-reizen-online.nl/single-reizen-nederland/">SINGLE REIZEN IN NEDERLAND</a></li>
enz
</li>
</ul>
</div>
<br class=clearer>
</div>

<div id=fullcontainer2-1>
<div class=centered>
<ul class=mainmenu>
<li><a class="" href="http://www.single-reizen-online.nl/actieve-single-reizen/">REIZEN PER ACTIVITEIT</a></li>
enz

</ul>
</div>
<br class=clearer>
</div>

en css:
#fullcontainer2 {
background: url(menu.jpg) repeat-x;
width: 100%;
height: 30px;
padding: 0;
margin-top: 2px;
margin-bottom: 2px;
border-bottom: 1px dotted #202020;
border-width: 0 0 1px 0;
float: left;
}

.centered {
margin: 0 auto;
width: 975px;
}

ul.mainmenu {
padding: 0;
margin: 0;
list-style-type: none;
}

.mainmenu li {
display: inline;
}

.mainmenu a {
display: block;
height: 24px;
float: left;
border: 1px solid #FFFFFF;
border-width: 0 1px 0 1px;
border-left-color: #d9d7d7;
border-right-color: #d9d7d7;
color: #643234;
font: bold 13px Times New Roman;
padding: 6px 9px 0px 9px;
margin: 0;
text-decoration: none;
}

.mainmenu a:hover {
color: #FFFFFF;
background: #BD0004;
}

.mainmenu a.selected {
color: #202020 !important;
background: #D7C9C9 !important;
}

br.clearer {
clear: both;
font-size: 0;
line-height: 0;
}


Hoe los ik dit nu weer op????????

Karel

 

[rexp]

Misschien je li ook wat padding geven. Ik doe meestal zoiets:

li {display: inline-block; *display: inline; zoom: 1; padding: 0 1px 0 1px;}
li a  {display: block; padding: 9px 10px 0 10px;}

 

[Karel]

Zal ik proberen. Heb het voorlopig wel ogelost door de text hoogte van 13 in 12 te wijzigen. Niet zo netjes allemaal, dus je advies/probeersel is nuttig.

karel