problem z html/css

w dziale Opera
pablik napisał(a):

Cześć, mam mały problem z html/css:
Tworze element div, w którym umieszczam dwa kolejne, pływające divy, wszystkie mają ramki. Wygląda zgodnie z oczekiwaniem w Operze i IE, za to w Mozilli dwie środkowe ramki są poza ramką główną (screenshot i kod źródłowy w załączniku). Czy robie coś nie tak? Jeśli nie to czy jest jakiś sposób obejścia tego?

eksperyment.zip

porneL napisał(a):

moze dodaj w div A cos z clear: both;

pablik napisał(a):

Nic nie daje sad

Moose napisał(a):

Moze podaj adres do strony online, gdzie mozna obejrzec to na zywo. Sciaganie i rozpakowywanie zipow i odpalanie pliku samemu zabiera za duzo czasu...

M.

pablik napisał(a):

Strona: http://pabl0s.w.interia.pl/eksperyment.html
Screehshot Mozilli: http://pabl0s.w.interia.pl/Firebird.gif

edit: Ale brzydkie rzeczy doklejają do dokumentów na interii...

Moose napisał(a):

Kazdy float jest wyjety z document flow i nie ma wplywu na wysokosc elementu. Musisz dodac content do parent div, albo zapodac wysokosc, albo minimalna wysokosc. Nie ma innej rady.

M.

edit: troche uproscilem.

porneL napisał(a):

a to ciekawe. to jak w css zrobic odpowiednik good'ol <img align=right>?

pablik napisał(a):

Podsumowujac, musisz dodac content do parent div

Czy chodzi o to http://www.w3.org/TR/CSS21/generate.html#content?
A może da się zrobić to bez flow - podając pozycje, albo coś, chodzi mi o to by uzyskać efekt, aby te bloki były w ramce obok siebie - niekoniecznie w ten sposób co próbowałem.
Dopiero się tego uczę, więc przepraszam za moją niewiedzę i głópie pytania.

Moose napisał(a):

Originally posted by porneL
a to ciekawe. to jak w css zrobic odpowiednik good'ol ?



Na wiele sposobow. Najlepszy jest taki, by dodac content, zeby obrazek mial kolo czego plywac. A jak nie, to dodaj display: table-cell do parent element.

M.

quiris napisał(a):

Tak. Moose ma rację. Na tej stronie: http://trats.ozforces.com.au/opera/tests/floatstretching.html jest opis błędu.

Spróbuję, również wyjaśnić po polskiemu w czym problem. Otóż jeśli ustawisz element B (będący dzieckiem elementu A) jako blok pływający, to wtedy element B powinien być wyjęty ze układu strony, tzn jego wymiary nie mogą mieć wpływu na układ strony, co jak widać nie jest prawdą w przypadku przeglądarki Opera oraz MSIE. Element pływający rozciąga element A (jego rodzica).
Możesz dodać jakiś tekst do A albo ustawić właściwość: min-height elementu A tak, żeby element A obejmował obydwa pływające elementy.