Eilinį kartą gražinant VU CSS’ą, iškilo man šiokia tokia dilema. Tarkime, turiu aš keturis iš eilės einančius block-level elementus:
<div id="div1">First Block</div>
<div id="div2">Second Block</div>
<div id="div3">Third Block</div>
<div id="div4">Fourth Block</div>
Tada tarkime, jog blokams pritaikome štai tokį stilių:
#div1 {
height: 100px;
float: left;
clear: right;
}
#div2 {
height: 40px;
float: right;
clear: right;
}
#div3 {
height: 40px;
float: left;
clear: left;
}
#div4 {
height: 40px;
float: right;
clear: right;
}
Taigi — kas man gali tiksliai pasakyti, kur turėtų atsidurti ketvirtasis blokas? Klausimas kyla todėl, kad IE (tame tarpe ir IE7b2 preview) jį priklijuoja prie antrojo bloko apačios, o tuo tarpu Mozilla bei Opera jo viršų sulygiuoja su trečiojo bloko viršumi.
Tikriausiai aprašymas nelabai aiškus, tad yra ir live pavyzdys.
Labas,
siulau ir tinklapio turinio nepamirsti!
http://www.vu.lt/en/welcome/facts_figures/ – labai kuklu ir nuobodu; daugiau!
http://www.vu.lt/en/welcome/maps_pictures/ – daugiau foto – taigi toks grazus universitetas, o nieko ner…
http://www.vu.lt/en/studies/ – tuscias frontpage’as…
Draugiski pastebejimai – noriu tik gero savo universitetui…
Dėkui už kritiką, nors postas ir ne apie tai.
tai tu juos tiesiog sudek i dar 2 divus — 1 ir 2, 3 ir 4. ar cia filosofinis klausimas?
Gal filosofinis… Nemėgstu nereikalingų divų. Juolab, kai tą problemą išsprendžiau per css. Tiesiog man įdomu, ar kartais nevertėtų kuriai nors šių naršyklių bugraportą užpildyt…
nu divas bent jau ne table
jis grupavimui ir skirtas.
ir aš 99% įsitikinęs, kad tokiais atvejais kaltas IE, bet bugreportai manau čia nepadės
Skirtas tai grupavimui, ale vistiek aš linkęs jo vengt, kai galiu. Nemėgstu sorso užteršinėti.
Iš http://www.w3.org/TR/REC-CSS2/visuren.html#float-position :
„5. The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.”
Taigi, ketvirto bloko viršus niekaip negali būti aukščiau už trečio.
Dėkui. Vadinasi, bus dar vienas bugreportas Internet Explorer’iui
Na štai. Apie klaidą pranešta Microsoft’ui.
Kad jau išsprendei problemą, siūlau dar iki visiško užsiperfekcionavimo pakeist divų idus į logiškesnius nei „div1”, pavyzdžiui „test_block_1”
ash paprastai tokiu atvejudarau
visi-divai {
display: inline;
float: left;
width: 250px;
}
kairieji-divai {
margin-right: 250px;
}
deshnieji-divai {
margin-left: -250px;
}
tai va… gal shik tiek negrazhus sprendimas, bet veikia