Nepříjemná chyba MSIE s border

MyEgo.cz

home foto blogy mywindows.cz kontakt

Nepříjemná chyba MSIE s border

Webdesign, CMS 09.10.05

Při vytváření libovolného nového designu mě vždy zarazí nějaká nová chyba MSIE, a to i ve striktním režimu MSIE 6.0. Myslel jsem si, že je už všechny dávno znám, ale tato parodie na prohlížeč mě vždy dokáže něčím novým (co dělá špatně) překvapit.

Například při této definici byl následující řádek za blockquote ujetý o 5px doprava a schovaný (a písmo bylo tudíž zcela nečitelné):

blockquote {
	border-left: 5px solid #F3E6B6;
	background: #F9F2DA;
	padding: 5px;
	margin: 10px 5px 10px 20px;
}

Řešením tedy bylo namalovat si 5px * 1px obrázek a nastavit jej jako pozadí pro MSIE, protože margin ani padding za to nemohl, chyba MSIE je v border:

* html blockquote {
	border:0 none;
	background: #F9F2DA url(blockquote.png) top left repeat-y;
}

S touto úpravou MSIE zobrazuje vše jak má, jen udělá o jeden HTTP request navíc oproti Opeře, Safari či Firefoxu.

Podobné problémy jsou i s pre, zde MSIE zjevně nerespektuje overflow:auto, a je potřeba mu natvrdo nastavit overflow:scroll, a nejlépe ještě šířku boxu, potom se třeba zde nerozpadne v MSIE layout stránky:

* html pre {
	overflow: scroll;
	width:460px;
}

Osobně se mi pro MSIE líbí jako řešení jeho chyb právě postup s * html, což je selektor který není nikdy splněn, ale MSIE jej přesto, díky další z jeho chyb, pokládá za existující. Je tak možné nadefinovat si funkční CSS styly dle norem W3C, a pro MSIE dodat jen doplňky, opravy jeho chyb.

Mimochodem, dva čtenáři mi říkali, že horní logo pod MSIE bíle bliká, nejsem schopen to nasimulovat, ale pokud Vy ano, napište mi prosím do komentářů jak máte MSIE 6.0 nastaven (nižší verze ignoruji). Nejprve si ale obnovte CSS, třeba pomocí Ctrl+R.

Komentáře

  1. 1 ne0 09.10.05, 03:10:23
    FB

    IE6, win xp SP1 - nic nebliká, ale nedivil bych se, kdyby se rozhodlo cokoliv samo od sebe blikat. jednou jsem měl pár absoluně pozicovaných obrázků v několika relativně pozicovaných blocích... Co s tím IE dělal, to nechápu dodnes: po hoveru na obrázek zmizel, po odsunutí myši se objevil a zmizely ostatní, a pak to různě kombinoval... asi je lepší vyvíjet vše pro IE a pak to poupravit pro ostatní, protože některé magické efekty z Redmondu nechávají rozum stát.

  2. 2 Zorg 09.10.05, 04:10:05
    FB

    Další hack pro MSIE styly je na začátku definice vlastnosti dát _ (např. _color: red;). Potom jsou ještě kouzelné způsoby, jak zařídit, aby si dané vlastnosti všímaly pouze určité verze IE, ty jsem ale naštěstí nikdy nepotřeboval.

  3. 3 Tommie Vega 09.10.05, 04:10:40
    FB

    [2] No jo, jenomže potržítkový hack _vlastnost je podle normy W3C, nevalidní, ale zato zcela funkční :)

  4. 4 Ondra Kněžour 09.10.05, 04:10:50
    FB

    Horní logo ti bude pravděpodobně blikat, pokud si nastavíš v IE Options -> General -> Temporary Internet Files -> Settings -> Check for newer version of stored pages -> Every visit to the page

  5. 5 Radek Hulán 09.10.05, 04:10:52
    FB

    [2] způsob * html je skutečně nejlepší, je to plně validní, dle normy, a přehledné

  6. 6 johny 09.10.05, 04:10:55
    FB

    Logo opravdu bliká, když na něj najedu v IE myší, tak na okamžik bíle blikne, to samé, pokud danou oblast opouštím.
    Sice jsem na této stránce nikdy předtim s IE nebyl, ale to ctrl+r opravdu pomohlo.

  7. 7 XThom 09.10.05, 04:10:58
    FB

    [2] [3] Stránka s valisným CSS sa dá zachovať aj s použitím nevalidných CSS vlastností, napríklad JavaScriptom. Pred časom som o tom napísal článok: http://inet.sk/clanok/2516/ako-na-validne-css-aj-s-nevalidnymi-vlastnostami...

    Polemizovať o tom, ktorá možnosť je najlepšia sa dá veľa, pre validné vlastnosti je najlepšia asi tá, ktorú tu popisuje Rado.

  8. 8 halogan 09.10.05, 05:10:05
    FB

    [3] Dle CSS 2.1 je již plně validní, ale já používám dvě metody: Buď již zmíněné * html nebo separatní soubor přes podmíněné komentáře.

  9. 9 Jan Brašna 09.10.05, 05:10:25
    FB

    [3] Valdiní nebo nevalidní není v CSS měřítko - to, že to připitomělý validátor označuje tak, jak to označuje, je jen díky absenci verzování. Gramaticky je to správně.

    [5] V IE7 se ho zbaví, takže doufej, že spolu s tím opraví i tuhle chybu, jinak to přestane být efektivní. Proč nejrozšířenější spotřební produkty nemůžou být udělaný dobře?

  10. 10 Zorg 09.10.05, 05:10:34
    FB

    [3] [5] To je myslím podle vkusu, někdo chce mít pohromadě všechny hacky, jiný všechny vlastnosti pro daný prvek/třídu. Podtržítkový hack JE podle CSS2.1 100% validní. A funguje díky tomu, že MS nejspíš bere celé CSS jako "vendor-specific extension", pro které jsou názvy, začínající podtržítky nebo pomlčkou určeny (bohužel tedy bez prefixu mso-) :-))
    Každopádně díky za obohacení znalostí, o * html hacku jsem nevěděl.

  11. 11 StanleyCZ 09.10.05, 07:10:04
    FB

    Vždy sem si myslel, že * html je nevalidní hack, viz Mraveniště.org

    IMHO, aby byl hack validní, měl by spoléhat na nedostatečnou implementaci CSS v zastaralých prohlížečích a ne na jejich chyby...

    Rozhodnutí validatoru nemusí být vždy 100% správné. Můžete uvést nějaký důvěryhodný zdroj, podle kterého usuzujete, že je tento hack validní?

  12. 12 Radek 09.10.05, 07:10:54
    FB

    Logo blikne 1x pri prejeti mysi, u IE 6 je vsechno nenormalni normalni..

  13. 13 Chose 09.10.05, 09:10:26
    FB

    To blikani v IE je znama chyba s pozadim na odkazu. Pokazde kdyz se najede mysi na takovy odkaz s pozadim, tak IE obrazek na pozadi pokazde stahuje znova (nebo alespon saha do cache) coz zpusobuje bliknuti. Chyba vznika nahodne a je tusim zavisla na aktualni velikosti cache u klienta.

    Zpravidla staci mit nastavenou malou cache v prohlizeci nebo cache promazat a problem se prestane projevovat.

    Ale samozrejme je mozne tuto chybu resit i jinou konstrukci HTML a pozadi nedavat na odkaz, ale treba na dalsi vnoreny prvek.

  14. 14 Radek Hulán 09.10.05, 10:10:57
    FB

    [13] děkuji za tip, hodil jsem background image z a na span, snad to pomohlo (nemohu to otestovat, mě to v MSIE nebliká)

  15. 15 Fred 10.10.05, 12:10:00
    FB

    Stoprocentně pomůže tenhle článek http://www.fivesevensix.com/studies/ie6flicker/... nebo tohle nastavení httpd.conf http://dean.edwards.name/my/flicker.html... (odkaz z toho vyčerpávajícího článku)

  16. 16 Marekzprahy 11.10.05, 04:10:23
    FB

    Taková drobnost - víte, že se (nejen) na úvodní stránce zobrazují špatně zelené odrážky LI? Po stažení stránky se zobrazí jen některé, po označení bloku myší nebo posuvu stránky se nějaké další objeví, jiné zůstávají schované, někdy se neobjeví vůbec, jindy jsou zase rozsypané (neodpovídají blokům LI, ale jsou seskupené pod sebou "zcela náhodně"),.. Zkrátka chová se to nějako nepředvídatelně. wXP Pro CZ+SP2, IE6, internet 4MBps (pomalým spojením by to být nemělo).

  17. 17 Radek Hulán 11.10.05, 04:10:26
    FB

    [16] to je problém Vašeho stařičkého browseru, má mraky chyb. Pořiďte si lepší /Opera, Firefox/. Nicméně já zmiňované problémy v MSIE 6.0 SP2 neregistruji, vše funguje zcela korektně.