Autor Zpráva
Clear
Profil *
Zdravím,
mám např. seznam položek, které jsou zarovnané nalevo (float:left) a vnořené do nadřazeného divu, který má rámeček.
k tomu, aby se nadřazený div natáhl (rámeček končil až pod "floatnutýma" položkama vložím do DIVu třeba tag <hr />, kterému v CSS nastavím clear:left. V Opeře i FF to funguje zprávně. Po skončení položek se ukončí DIV a vykreslí se spodní rámeček.
V IE však pod položkama vznikne mezera (takže vzdálenost mezi položkama a spodním rámečkem je hodně velká).
Nevíte někdo, jak vyřešit tento problém v IE?
Clear
Profil *
Tady jsem hodil na net ukázku
http://clearleft.wz.cz/float.htm
Keilew
Profil
IE bere height čáry z jádra. Více http://hlodovnik.keilew.net/tlachtaty-webdesignerske/hr-cleaner-id-1/ . Doporučuju používat jako čistič BR a HR dát neviditelné, aby tam bylo jen pro účely zobrazení bez stylů. Obecně je těžké stylovat HR.
j
Profil *
keilew: http://www.vitdlouhy.cz/clanky/stylovani-hr.php
Keilew
Profil
j
Hezké, ale nefunguje.
Clear
Profil *
Keilew
Jenomže tag <br /> mi to nezarovná v IE7, ten prohlížeč ho prostě ignoruje.
J
Profil *
čistič hr dle p. Staníčka:
clear: both; border: none; visibility: hidden; margin: -1px 0 0 0; padding: 0; height: 1px;
Clear
Profil *
J
jn, jenomže to zase udělá v IE chybu, o které se zmiňuju v prvním příspěvku. Je tam mezera navíc.
mata
Profil
Pokud bude mít div pevnou šířku nebo výšku tak mu jí nastavit a dát overflow:hidden, tím se sám vyclearuje. Pokud ne tak pak jako čistič použít <div style="clear:both;line-height:0;">&nbsp;</div>
J
Profil *
Clear: co jiný čistič - toto vidím v FF, O a v IE6 bez mezery
(když padding:0 a margin: 0 jsou zadány na začátku v *)

#clear2 {clear: both; }
<!--<hr id="clear" />--> <p id="clear2"></p>
mata
Profil
a proč je tam to hr v komentáři? to tam pak nemá vůbec žádný význam...
čističem může být jakýkoli blokový element, takže je jedno jestli p nebo div, div je lepší, protože sémanticky nemá žádný význam
J
Profil *
a proč je tam to hr v komentáři?
aby bylo jasné, že ze stávajícího ho má vyhodit :-)
Keilew
Profil
J
Toto řešení taky dělá tu konstatní "díru" kolem čáry v IE.

Udělej to jednoduše:
<div class="clear"><hr class="invisible" /></div>

Je snad jasný podle názvu tříd, co bude v kaskádách. Syntakticky je to správně, ani prázdnej div to není;-)

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: