Autor Zpráva
Armentarius
Profil *
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 ?
Petroff
Profil
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)

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: