Diskuse JPW: IE cudne vykresluje float

	Autor	Zpráva
	Armentarius Profil *	#1 · Zasláno: 20. 9. 2007, 14:46:09 Odpovědět Citovat Mam nasledovny kod: <div style="float: left; width: 100px; height: 10px; background-color: red;"></div><div style="float: left; width: 100px; height: 10px; background-color: green;"></div> <div style="float: left; clear: left; width: 100px; height: 10px; background-color: yellow;"></div><div style="float: left; width: 100px; height: 10px; background-color: blue;"></div> Nic viac tam nie je, takto som to zjednodusil, aby som lepsie ilustroval problem. Ten spociva v tom, ze vo FF sa vsetko zobrazuje tak, ako by som chcel, avsak v IE sa modry div zobrazi namiesto na druhom "riadku" vedla zlteho (tak, ako vo FF) na prvom riadku vedla zeleneho divu. Ako presvedcit IE, aby to zobrazoval podobne ?
		Časová prodleva: 18 dní
	Petroff Profil	#2 · Zasláno: 8. 10. 2007, 23:18:30 Odpovědět Citovat V podstatě si IE počíná logicky. Všechny 4 floaty leží ve stejné výšce (tu určuje pozice plaváčků v neplovoucím obsahu, ale tady žádný není) Tedy leží úplně nahoře a umísťují se zprava doleva v pořadí,jak jdou za sebou. Když dáš clear 2. nebo 3. nebo 4., tak se umístí pod 1. ale ostatní pokračují v horním řádku (dát clear 1. nemá žádný vliv). Pokud dáš clear dvěma z nich, budeš je mít pod sebou (pod 1.) => 2sloupce: 3+1 Pokud dáš clear třem z nich, budeš je mít pod sebou (pod 1.) => 1sloupec: 4 Pokud chceš 2 v horní řadě a 2 pod nimi: # tak musíš udělat 2 vedle sebe a pod ně umístit "dvoják" => 2 floaty (zabalené do 1 float DIVu s clear) ## anebo pod dvoják umístit dvoják => to může mít význam, pokud chceš zabránit, aby sis zúžením okna ty horní (2 vedle sebe) dal pod sebe (prostě obalům nastavíš šířku=součtu šířek) ### anebo ušít jediný obal (=float div) přesně na míru (šířku) těm 4 (nebudeš potřebovat clear a celkový počet DIVů je 5) >>UKÁZKA (##): <div style="float: left; width: 600px;"><div style="float: left; width: 300px; height: 50px; background-color: red;"></div><div style="float: left; width: 300px; height: 50px; background-color: green;"></div></div> <div style="float: left; width: 600px; clear: left"><div style="float: left; width: 300px; height: 50px; background-color: yellow;"></div><div style="float: left; width: 300px; height: 50px; background-color: blue;"></div></div> >>Nebo pomocí tabulky se styly (## + ###): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <script type="text/javascript">window.onload=function(){alert("Dokument v modu: "+document.compatMode)}</script> <style> hr { margin: 1em 0 } hr, div {clear: left; float: left; width: 600px } div div {clear: none; height: 50px; width: 300px } </style> </head> <body> <div><div style="background-color:red;"></div><div style="background-color: green;"></div></div> <div><div style="background-color: yellow;"></div><div style="background-color: blue;"></div></div> <hr /> <div> <div style="background-color:red;"></div> <div style="background-color: green;"></div> <div style="background-color: yellow;"></div> <div style="background-color: blue;"></div> </div> </body> </html> Asisis to porovnal v IE a FF (klape)? Vidíš 1 rozdíl? Tak zkus (na oplátku - mě se nedaří) najít styly pro HR v IE (ve FF je HR správně zarovnaná doleva, přesně mezi barvičkami)
		Časová prodleva: 17 let

Vaše odpověď

Mohlo by se hodit