www.SAMURAJ-cz.com 

18.12.2017 Miloslav Translate to English by Google     VÍTEJTE V MÉM SVĚTĚ

Články

Nezobrazení plovoucího objektu v Internet Exploreru

Neděle, 12.02.2006 16:49 | Samuraj - Petr Bouška |
Vyrobili jste krásný layout pomocí CSS pozicování a když jej vyzkoušíte v IE, tak se vám některá část nezobrazí? Nebo jste umístili obrázek obtékaný textem a ten obrázek není v IE vidět? Pokud jste narazili na takovýto nebo podobný problém, kdy objekt, který má nastavenu vlastnost float, není vidět v IE, tak v tomto článku naleznete rady, jak to opravit. Problém je v tom, že IE za určitých specifických situací umístí plovoucí objekt na stránce do pozadí.

Situace: máte objekt, který má nastavenu vlastnost position: relative a uvnitř tohoto objektu je další, který je plovoucí - má nastaveno float: left nebo float:right

Řešení: musíte i tomu vnořenému objektu nastavit position: relative

Příklad

Chyba při float v IE

Tento příklad si můžete vyzkoušet a prohlédnout.

Problém vzniká, pokud použijeme následující kód:

<style>
  div.main_block { position: relative; border:  1px solid #000;  }
  div.inside_block { float: left }
</style>
<div class="main_block">
  <div><div  class="inside_block">Text, skrytý uvnitř.<br>
  Tohle už může být vidět.</div></div>
  <div> Text, který je navrchu.</div>
</div>

Tuto situaci jsem vyzkoušel v poslední verzi Internet Exploreru (6 SP2). Naproti tomu ve Firefoxu je vše v pořádku. Samozřejmě se stejná chyba objevuje i u složitějších struktur, ale vše je způsobeno pozicováním uvedeným v příkladu.

Metody, jak dosáhnout v IE správného zobrazení:

  • u main_block odstraníme position, jenže to v mnoha příkladech nemůžeme (například pokud máme nějaký objekt s absolutním pozicováním nebo při používání vlastnosti clear)
  • main_block nastavíme pevnou šířku, což opět často nelze (například když chceme obejít IE box model pro starší verze IE)
  • inside_block nastavíme také vlastnost position: relative, myslím, že toto je jednoduché řešení, které můžeme použít vždy

Jako další zajímavosti si můžete vyzkoušet, co se stane, když v obou blocích kombinujete použití a nepoužití vlastnosti border nebo inside_block nebude vnořen v jiném divu (také záleží na použití border).

zobrazeno: 4771krát | Komentáře [2]

Autor:

Související články:

Problémy IE

Při tvorbě webových stránek často narazíme na problémy špatné implementace v Internet Exploreru.

Pokud se Vám článek líbil, tak mne potěšíte, když uložíte odkaz na některý server:

Pokud se chcete vyjádřit k tomuto článku, využijte komentáře níže. Pokud chcete poradit s nějakým problémem či diskutovat na nějaké téma, tak použijte fórum.

Komentáře

  1. [1] dakarin

    přehledné vysvětlení popsaného jevu ;-)

    Úterý, 06.06.2006 10:14 | odpovědět
  2. [2] Samuraj

    odpověď na [1]dakarin: Díky. Jsem rád, že to někdo čte a samozřejmě potěší i pozitivní reakce.

    Úterý, 06.06.2006 12:34 | odpovědět
Přidat komentář

Vložit tag: strong em link

Vložit smajlík: :-) ;-) :-( :-O


Ochrana proti SPAMu, zdejte následující čtyři znaky image code

Nápověda:
  • maximální délka komentáře je 2000 znaků
  • HTML tagy nejsou povoleny (budou odstraněny), použít se mohou pouze speciální tagy (jsou uvedeny nad vstupním polem)
  • nový řádek (ENTER) ukončí odstavec a začne nový
  • pokud odpovídáte na jiný komentář, vložte na začátek odstavce (řádku) číslo komentáře v hranatých závorkách