Nejak se trapim s takovou jinak myslim jednoduchou veci, ale nedari se mi to jak bych chtel.

normalni svisle menu - css:

div.vmenu {
    padding:0px;
    margin:0px;
    }

.vmenu ul
{
    padding:0px;
    margin:0px;
    list-style:none;
    width: 160px;
    border-top:1px solid #000000;
}

.vmenu ul li
{
    font-family:Arial; 
    font-size:9pt; 
    font-weight:bold;
}

.vmenu ul li a
{
    padding:5px 2px 5px 12px;
    color:#FFF;
    color:#000000; 
    background-color:#cccccc; 
    border-bottom:1px solid #000000;
    border-right:1px solid #000000;
    display:inline-block;
    width: 160px;
    text-decoration:none; 
}

.vmenu ul li span
{
    padding:5px 2px 5px 12px;
    color:#000000; 
    background-color:#ffffff; 
    border-bottom:1px solid #000000;
    border-right:1px solid #000000;
    display:inline-block;
    width: 160px;
}

.vmenu ul li a:hover
{
    background:#003300;
    color:#ffff00;
    text-decoration:none;   
}

hatemele:

<div class="vmenu">
  <ul>
    <li><span>Zvolená popožka</span></li>
    <li><a href="#">Menu č.1</a></li>
    <li><a href="#">Dlouhé, skutečně docela dost dlouhé menu.</a></li>
    <li><a href="#">blabla</a></li>
    <li><a href="#">Smysl života...</a></li>
    <li><a href="#">Smysl vesmíru...</a></li>
    <li><a href="#">....a vůbec</a></li>
    <li><a href="#">A další menu</a></li>
 </ul>
</div>

result IE vs. ostatni:




- proste IE padding nepocita do rozmeru prvku, zbytek ano. Jiny rozmer stve, ale vic to nedotazene oramovani. Jde to nejak elegantne vyresit? Menu musi zustat s pouze scistymi (nebo - stejnymi) li (a span pro "selected") tagy, neb se to ve finale bude plnit z databaze = nechci to nijak komplikovat kvuli prvni polozce.

- predem diky za relevantni rady.