Hlavní navigace

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ý...

  • 30. 6. 2008 13:08

    Radovan (Uzivatel) (neregistrovaný)

    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"