Whitespace, pre a overflow v IE

První krůčky

Ukázky zdrojového kódu tu mám řešené trochu jinak než Medhi. Používám tag <samp>, který řádky implicitně zalamuje. Přiřadil jsem mu tedy CSS vlastnost white-space s hodnotou nowrap. Všechno fungovalo krásně do chvíle, kdy jsem se na výsledek podíval v IE. Nezklamal. Internet Explorer zobrazil zcela nelogicky i vertikální posuvník. Zoufale jsem nakoukl k Medhimu, to samé.

Peripetie

Jsem tvor neoblomný. Posuvníky obecně mne dost otravují a pakliže jsou navíc zcela zbytečné, tak mne přímo… iritují. Důkladným studiem daného boxu jsem přišel na fakt, že Internet Explorer zobrazuje vertikální posuvník jen proto, že předtím zakryl kus textu posuvníkem horizontálním. Smutné a pravdivé. Nicméně tato informace mi také dala klíč, jak tento problém velice snadno vyřešit.

Dénouement

Od této chvíle je to již prosté. Stačí boxu nadefinovat spodní padding o šířce scrollbaru a následně skrýt vertikální scrollbar, k čemuž dobře poslouží proprietální CSS vlastnost IE overflow-y. Nemám rád takový balast v jinak validním CSS kódu, proto jsem se rozhodl vytvořit nový CSS soubor s definicí pouze pro IE 5.5+ (IE 5.0 nepodporuje white-space: nowrap) a jeho zpracování ponechat v režii podmíněných komentářů. Výsledný CSS kód tohoto souboru pro mě tedy byl takový:

.kod { overflow-y: hidden; padding-bottom: 20px; }

A v HTML jsem dodal následující:

<!--[if gte IE 5.5000]>
<link href="./../css/ie-only.css" media="screen" rel="styleshe­et"type="text/css" />
<![endif]-->

Voilá! Funguje.

Pro Medhiho

pre { overflow-y: hidden; padding-bottom: 20px; }

HTML:

<!--[if gte IE 5]>
<link href="./ie-only.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->

Co z toho?

7. 11. 2005, 1.16 | (X)HTML, CSS.


Zanechte komentář





Můžete použít Texy! formátování.
Pokud se obsah boxů níže mění, zatímco píšete, potom žádné číslice nevyplňujte. V takovém případě antispam funguje, pouze se prohlížeči nepovedlo skrýt tento box.