liste i CSS - yet another strange thing

[ivanhoe]

imam klasican komad CSS-a za pravljenje horizontalnog menija od UL liste:

#top ul {
float: right;
margin-right:25px;
list-style-type: none;
}
#top ul li {
display:inline; /* fix IE */
float: right;
}
#top ul li a {
display: block;
float: right;
}

ovo iz nekog razloga ne radi. Isti taj css, ali kad su svi floatovi left radi perfektno ?

E sad, provalio sam ja da treba samo UL da floatujem desno, a da LI i A ostavim da budu float:left, i onda je sve ok... but why ???

Ovo se isto desava i u FF i u IE, identicno ga renderuju, znaci da nije bug, nego valjda ima neko razumno objasnjenje zasnovano na specifikaciji... samo koje?

[noviKorisnik]

Možeš da dodaš ...

#top ul li {
width: 100px;
}

... pa će da radi i tvoje gorenavedeno. Ako ti ne odgovara fiksna širina, hm, nađi nešto drugo... Kad staviš desno plutanje na stavke liste, čitaš ih u rtl smeru, simpatično zbunjujuće :-)

[darche]

btw. Zar netreba svaki "floatovani" element da ima unesenu sirinu! Inache pizdi!..
barem ja mislim da je tako!

[ivanhoe]

nije obavezna sirina, kad pravis meni ne zelis (obicno) da svi "dugmici" budu iste sirine. Radice sve lepo bez fixne sirine sve dok je stavljeno da LI i A budu float:left.

Ono sto sam ja pitao i sto me zbunjuje je zasto se ne renderuju lepo kad su float:right.

[dee]

#top>ul {
float: right;
margin-right:25px;
list-style-type: none;
}
#top ul li {
/*display:inline; fix IE */
float: right;
text-align:right;
}
#top ul li a {
display: block;
}

koliko vidim, problem je u float:right; <a> elementa. nisam siguran da je sto posto tocno, ali logicno objasnjenje mi je otprilike ovakvo:

float elementi moraju imati width jer browser mora znati gdje pocinje sadrzaj oko floata. u slucaju kad ti je na LI postavljen float right, a bez duzine, a unutar njega i <a> sa float:right, tada <a> ne zna gdje je desni rub LI elementa i protegne se do kraja UL-a. logicno, slijedeci ce u slijedeci red. rjesenje ti je ili staviti width na LI (sto nije najsretnije za menu) ili ovako kao gore: maknuti float sa <a> i staviti text-align:right na LI element.

[darche]

Originalno napisao dee

koliko vidim, problem je u float:right; <a> elementa. nisam siguran da je sto posto tocno, ali logicno objasnjenje mi je otprilike ovakvo:

float elementi moraju imati width jer browser mora znati gdje pocinje sadrzaj oko floata. u slucaju kad ti je na LI postavljen float right, a bez duzine, a unutar njega i <a> sa float:right, tada <a> ne zna gdje je desni rub LI elementa i protegne se do kraja UL-a. logicno, slijedeci ce u slijedeci red. rjesenje ti je ili staviti width na LI (sto nije najsretnije za menu) ili ovako kao gore: maknuti float sa <a> i staviti text-align:right na LI element.

upravo sat hteo da to napisem - ali me refresh browsera osvestio... nemoras na <a> elemenat da stavljas "float" - pogodi ga coek!