Názor ke článku CSS triky - jak obtékat i bez "clearování" od Radovan (Uzivatel) - Jejda, dúfam, že tento komentár už nebude braný...

Jejda, dúfam, že tento komentár už nebude braný ako spam, no urobím zhrnutie a vysvetlenie a deklarujem si autorske pravo na napad :-D (ironia)

Takže zmena oproti stávajúcemu riešeniu a iným dostupných na weboch je rozdielna v tom, že nepoužíva žiadne všeobecné a krkolomné hacky, ale len jemne upravuje nekompatibilitu CSS v IE6/7 a prehliadačoch na jadre Gecko 1.8 (Firefox 2)

ul
{
list-style: none;
border-bottom: 1px solid #DDDDDD;
}

ul li
{
display: inline;
}

ul li a
{
/* mozilla haven't inline-block */
display: -moz-inline-block;
display: -moz-inline-box;
display: inline-block;
background-color: #EEEEEE;
border: 1px solid #DDDDDD;
padding: 5px 15px;
margin: 0 5px -1px 0;
list-style: none;
}

ul li a:hover
{
background-color: white;
}

ul li.selected a
{
background-color: white;
border-bottom-color: white;
}

Princíp je v tom, že využijeme atribút z CSS 2.1 "display: inline-block" kedy objekt sa sprava ako blok, ale je zarovnaný ako riadkový element. Jediný použitie "hacku" je to, že prinútime Firefox nižši ako verzia 3 využit svoje riešenie tohoto atribútu, pre ostatné prehliadače (tým aj nový Firefox 3) sa využije štadardný zápis.
Malá zmena sa týkala aj IE6/7, kedy "inline-block" je možné použiť len pre značky s prirodzeným atribútom display: inline, čo práve LI nebolo. Tým teda stačí definovať odkaz ako "inline-block" a položku zoznamu zmenit na "inline"