css ul li

  • Kuidas UL LI-ga ikka padding tuleb osade brauseritega, kui margin ja padding 0? Midagi puudu?

    CSS:
    * {
    margin: 0px;
    padding: 0px;
    list-style: none;
    border: 0;
    text-decoration: none;
    outline: none;
    background-color: #ff0000;
    }
    .container{
    width:100px;
    heigh t :100px;
    background-color: #00ff00;
    }
    .container .leftup{
    float:left;
    width:50px;
    height:50 px;
    background-color: #0000ff;
    }
    .container .rightup{
    float:left;
    width:50px;
    height:5 0px;
    background-color: #ffff00;
    }
    .container .below{
    clear:left;
    width:100px;
    height:50 px;
    background-color: #0ffff0;
    }

    HTML:
    <ul class='container'>
    <li class='leftup'>Üleval vasakul</li>
    <li class='rightup'>Üleval paremal</li>
    <li class='below'>All</li>
    </ul>

    Osade brauseritega leftup ja rightup ilusasti ilma vahedeta, kuid below ja ülemiste vahel mingi ~2px margin... osade brauseritega kõikide vahel ~2px margin.. osad viskavad rightup-i leftup-i alla...

    Asendada UL-id, LI-d DIV-idega? Tahaks CSS-iga korda :)

    10. juuni 2008 - 23:23:35 · Otselink

  • Ked† 16 a

    sul need tühikud peavadki osade 'px'-ide ees olema?
    Millistest browseritest jutt?... Mul nagu näitab ilusti igalpool...
    doctype?

    10. juuni 2008 - 23:54:34 · Otselink

  • Ei, ma ilma tühikuteta kirjutasin

    11. juuni 2008 - 00:11:16 · Otselink

  • ma kasutaksin float:left asemel display:inline, aga see on rohkem maitse asi. mõni IE tahab, et loendi elementide (li) vahel ei oleks mitte midagi (ei tühikuid, ei reavahetusi)

    11. juuni 2008 - 00:12:15 · Otselink

  • wuzz 16 a

    LI'dega ongi IE5-6 (ja ka 8 b1) üks suur probleem. Margin pannakse alati juurde kui LI sisaldab kohe block elementi. aitab float või inline

    11. juuni 2008 - 10:46:59 · Otselink

  • Aga mul ongi ju "float: left" ja li ei sisalda block elementi.

    parandus: img on block element? siis sisaldab... aga float on peal ju LI klassidel:S

    img{
    display: inline;
    } ?

    11. juuni 2008 - 11:49:21 · Otselink

  • paries 16 a

    img on ikka inline element.
    Panna fikseeritud kõrguse ja laiusega elementidele:
    overlfow: hidden

    11. juuni 2008 - 12:04:55 · Otselink

  • Wuzz ja Paries, aitäh :)

    11. juuni 2008 - 19:32:54 · Otselink