Problikávání textu v IE (aktualizováno)

Aneb jak dokáže Internet Explorer krásně stránky rozblikat!

Při překrytí textu obrázkem pixyho metodou se IE chová velmi podivně. Najíždíte-li na prvek přes okraj divu – problikne překrytá část, takže na chvíli vidíte i text, který má být zraku skryt.
Chybu si můžete prohlédnout na stránce http://www.c3studio.cz (ale nejenom zde, tímto problémem trpí mnoho dalších webů: Plaváčkův blábolník, digitální Citron, Wordstudio.blog, QuickSharův msblog, zdenekkostal.cz, .. atd.). I když bych to spíš než chybu označil za nemilou vlastnost, která se zobrazí jen setině uživatelů (nedejbože právě Vašemu zákazníkovi) ..i tak to zamrzí.



Podmínkou pro tento BUG je mít v IE zapnuto:

/—code html
Možnosti internetu -> Dočasné soubory -> Nastavení
-> Zjišťovat existence -> Při každé návštěvě stránky

Zde můžete vidět zdrojový kód příkladu..

xHTML:

/—code html

C3studio …

CSS:

/—code html
#logo-text {
margin-top:0px; margin-left:0px; padding:0;
position:relative;
left:0px; top:0px;
width:241px; height:86px;
overflow:hidden;
}

#logo-text span {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:241px; height:86px;
margin:0; padding:0;
background:url(../image.gif) top left no-repeat;
cursor: pointer;
}

Kdesi jsem četl, že probliknutí trošku urychlí editování elementu A po najetí (hover)

/—code html
#logo-text a:hover {}

není to ale moc znatelné a hlavně – problém to neřeší!

Nápad překrýt text obrázkem jsem poprvé našel u Pixyho.
Ale už zde v něm našel onu “chybku” jistý Pavel Novák – viz komentář. Bohužel mu na jeho podnět nikdo neodpověděl. Stejný problém se řešil také na fóru intervalu – FIR – problikávání textu. Zde došli k řešení:

citace přispěvatele s nickem Leo:

Zda se, ze je zahada vyresena. Pokud v IE (zkousel jsem 6) nastavite aby se kontrolovala aktualnost pri kazde navsteve stranky (coz je podle me blbost, ale dobre), tak pri najeti mysi na odkaz si IE snazi overit jestli je obrazek aktualni nebo ne. Na Vasich strankach mate normalni obrazek, zatimco ten na Intervalu se lisi tim, ze v HTTP hlavicce server posila prohlizeci informaci o tom, ze obrazek je platny do 31. prosince 2004. Prakticky se to projevuje tak, ze ve Vasem pripade si prohlizec musi platnost pri najeti mysi overit na serveru (aby zjistil, ze server posle kod 304 Not modified), zatimco u Intervalu proste az do 31. prosince nic testovat nebude… Reseni je tedy na strane serveru – pro obrazek (obrazky, je to sikovne udelat obecne) musite nastavit Expires. Leos Ondra

Bohužel mi toto řešení moc nevyhovuje a potřeboval bych jiné, praktičtější. Nevíte o nějakém?

Nastínění takové řešení jsem našel zde:
http://maciweb.net/blog/web/clanek.php?clanek=84

Důkaz pro Plaváčka:

stáhněte a zobrazte na svém PC)

Komentáře

4 Responses

  • Můj Blábolník už by tímto neduhem trpět neměl (alespoň pokud jsem měl možnost si ho otestovat na několika nezávislých uživatelích). Můžeš si zkusit CTRL + F5 a znovu načíst styly? Možná jsem objevil schůdné a elegantní řešení. Pokud se ti problikávání bude dále projevovat, pak mám smůlu :)

  • Bohužel :( Když jsem hodně trpělivý a přes okraj přejíždím opravdu pomalu, tak textový obsah na modrém podkladu problikne (v IE6).
    ^^ viz přiložený flash
    Ale i tak bych rád znal ono “řešení” – třeba pomůže.

  • Šmárja díky za upozornění, zítra si nad to sednu a pokusím s tím bojovat.

  • TO Zdeněk Košťál:
    Nevím jak moc “závažná” chyba to pro tebe je, ale každopádně není zač ;)

Napiš komentář