MozillaPL.org - polskie centrum Mozilli

Główne menu:

img z floatem nie powiększa height diva, w którym siedzi

Dyskusje na temat standardów WWW i zgłoszenia stron niedziałających poprawnie w przeglądarkach z rodziny Mozilli (w tym Mozilla Firefox)

Moderator: Pomocy?!

img z floatem nie powiększa height diva, w którym siedzi

Postautor: pariah » 21 sierpnia 2008, 16:12

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.0; pl; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

kod
Kod: Zaznacz cały
<div style="border: solid 1px red; width: 80%;">
  <img style="float: left; width: 150px; border: solid 1px blue" src="150na500.png" alt="">
  asdasdasdasdasdasd ala ma kota
</div>

świruje, tzn. DIV się nie rozpycha w dół pod wpływem IMG tylko zawsze posiada wysokość tekstu. Tak ma być czy tak ma nie być? Opera i ie6 rozpychają, mozilla navigator też nie rozpycha. Nie mam zbytnio jak tego ominąć bo wysokość obrazków u mnie na stronie tych z lewej jest zmienna
pariah
 

Postautor: Witia » 21 sierpnia 2008, 16:32

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Wbrew pozorom Firefoks zachowuje się poprawnie. Opis zagadnienia wraz z rozwiązaniami jest pod adresem:
http://complexspiral.com/publications/c ... ng-floats/

Z grubsza chodzi o to, że, jeśli chcemy, by następny element już nie opływał wcześniejszego, to musi mieć ustawioną własność clear. Jeśli chcemy mieć ramkę czy tło elementu, to wewnątrz niego powinien być jakiś element z clear, umieszczony później niż ten opływany. Gdy się inaczej nie da, to ostatecznie można wstawić pustego diva z własnością clear.
Witia
 
Posty: 200
Z nami od: 25 lipca 2003, 13:36

Postautor: pariah » 21 sierpnia 2008, 16:48

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.0; pl; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

dzięki, wszystko wyjaśnia.
pariah
 

Postautor: marcoos » 21 sierpnia 2008, 18:48

Przeglądarka: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1a2pre) Gecko/20080820020636 Minefield/3.1a2pre

Witia pisze:Jeśli chcemy mieć ramkę czy tło elementu, to wewnątrz niego powinien być jakiś element z clear, umieszczony później niż ten opływany. Gdy się inaczej nie da, to ostatecznie można wstawić pustego diva z własnością clear.


Bezsensowne tworzenie śmieciowatych elementów (chyba że chcemy sczyścić tylko lewy albo tylko prawy float - wtedy ma to sens). Prościej i bardziej elegancko nałożyć overflow: auto na kontener.

Kod: Zaznacz cały
<div style="overflow: auto; border: 1px solid red;">
 <img style="float: left" alt=";-)" src="http://mozillapl.org/images/bgHelpArea.png" />
 Cuda panie, cuda...
</div>


;-)
marcoos
Moderator
 
Posty: 2227
Z nami od: 12 października 2002, 10:25
Lokalizacja: Wrocław

Postautor: Witia » 21 sierpnia 2008, 19:39

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.0.1) Gecko/2008070208 Firefox/3.0.1

Trzeba jeszcze pamiętać, że w IE, przynajmniej do wersji 6, element rozciągnie się, gdy ma "layout" (hasLayout). W tym przypadku jest on wymuszony przez nadanie szerokości. Bez zdefiniowanej szerokości również w IE ramka nie wyświetli się wokół całej grafiki. "overflow: auto" nie daje w IE tego efektu, co np. w Firefoksie.

Więcej: http://kurs.browsehappy.pl/Bugi/HasLayout
Witia
 
Posty: 200
Z nami od: 25 lipca 2003, 13:36

Postautor: marcoos » 21 sierpnia 2008, 21:51

Przeglądarka: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1a2pre) Gecko/20080821020645 Minefield/3.1a2pre

Witia pisze:Trzeba jeszcze pamiętać, że w IE, przynajmniej do wersji 6, element rozciągnie się, gdy ma "layout" (hasLayout). W tym przypadku jest on wymuszony przez nadanie szerokości. Bez zdefiniowanej szerokości również w IE ramka nie wyświetli się wokół całej grafiki. "overflow: auto" nie daje w IE tego efektu, co np. w Firefoksie.

Więcej: http://kurs.browsehappy.pl/Bugi/HasLayout


Więcej o czyszczeniu floatów bez dodatkowych "clearing divs"... u PPK. ;)
marcoos
Moderator
 
Posty: 2227
Z nami od: 12 października 2002, 10:25
Lokalizacja: Wrocław


Wróć do Standardy WWW i źle działające strony

Kto jest online

Zarejestrowani użytkownicy: Bing [Bot], Google [Bot]

cron
Przejdź do powiązanej strony

Nawigacja:

Stopka: