Whitespace, pre a overflow v IE

To vám takhle brouzdám u Medhiho a koukám, že má docela hezky řešené ukázky zdrojových kódů. Tag <pre> si pěkně nastyloval a definoval mu overflow: auto, takže pokud je řádek delší, než je šířka boxu, objeví se horizontální posuvník. Říkám si: „Dobrý nápad, něco podobného u sebe zavedu také!“ Byv zaujat myšlenkou inspirace až ideového zločinu, pustil jsem se do práce.

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

Když už takto bezostyšně od Medhiho opisuji, alespoň popíšu, jaké řešení by se hodilo v jeho případě. V jednom ohledu se totiž liší. Tím detailem je pouze úprava podmíněného komentáře, aby se aplikoval i pro Internet Explorer 5, neboť tag <pre> se nezalamuje už od dávných dob. Výsledný kód by tedy mohl být takovýto. CSS soubor:

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?

Je to taková CSS blbinka, ale doufám, že pro někoho z vás užitečná. Nepochybuji, že určitě nejsem první, kdo s takovým řešením přišel a že možná existuje mnohem snazší řešení, ale takhle to leží a běží. Medhimu se omlouvám za opisování a doufám, že tento článek je mu alespoň malou satisfakcí. :o)

30 komentářů k “Whitespace, pre a overflow v IE”

1. Marek Prokop říká:

Pro krátké ukázky zdrojového kódu je to řešení velmi praktické. Problémy nastanou, když je kód delší a nevejde se na výšku na jednu obrazovku. I pak jím sice jde vodorovně posouvat kursorovými šipkami, jenže nejprve se musí do posuvné oblasti kliknout a to málokoho napadne.

Proto jsem kdysi ukázky kódu na Sově řešil tak, že jsem každý řádek uzavřel do divu s třídou odpovídající stupni odsazení zleva. Bylo to sice pracnější, ale krásně přehledné i bez rolování.

7. 11. 2005 v 2.07


2. dgx říká:

Díval jsem se, jak tento problém řeším u sebe a v kódu pro IE mám padding-bottom: 2em (tedy při zvetšení písma se zvětší i spodní odsazení) a overflow-y: visible (což kupodivu funguje jako hidden).

7. 11. 2005 v 3.25


3. Jan Brašna říká:

Jop, tak to mám velice podobně jako David (s IE bordelem separovaným bokem).

7. 11. 2005 v 6.19


4. rarouš říká:

Ještě bych si radši dával pozor na ten podmíněný komentář! Raději bych odříznul IE7+, protože ještě nevíš jak se bude chovat.

&lt;!--[if lt IE 7]&gt;<br />
&lt;link href=&quot;./ie-only.css&quot; media=&quot;screen&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;<br />
&lt;![endif]--&gt;

by bylo IMHO lepší…

7. 11. 2005 v 12.42


5. Yuhů říká:

Hezký článek. Chtěl jsem si to přidat do svých poznámek, ale pak jsem si všimnul, že už to pár let používám. Vypadá to takhle:

.sirsi {width: 137%; } /* co může přelézt doprava/ .sirsi {width: "100%"; overflow: "auto"; overflow-y: "visible";} / ty uvozovky jsou pro IE 5.5*/

Větší text nejsem schopen napsat, protože tady nějak blbne focus (Mám IE 6, W2K) a nevidím, kam píšu.

7. 11. 2005 v 18.58


6. Dero říká:

Teď už by mělo být vše v pořádku, Yuhů, klidně se rozepiš.

7. 11. 2005 v 19.13


7. wow gold říká:

CHEAP wow gold

4. 9. 2009 v 5.52


8. wow gold říká:

BUY wow power leveling

4. 9. 2009 v 5.53


9. George Matthews říká:

Ora i giorni la fascia sulla replica di [url=http://www.axtonmfg.com]replica rolex[/url] avr sempre il marchio di Rolex che la indica prestigio e la stima.

21. 9. 2009 v 20.15


10. trademic.com říká:

[url=http://www.trademic.com/product/index.tm.sid=211.html][b][size=150]as seen on tv wholesale[/size][/b][/url]

8. 1. 2010 v 7.05


11. fere říká:

sdfszumba dvd wholesalesdf wholesale bootssdf wholesale nflfwew

1. 3. 2010 v 10.12


12. sdf říká:

344wholesale nfl</br>werewr wholesale mbt shoes</br>werwe wholesale abercrombie</br>erwrer

3. 3. 2010 v 9.16


13. Dropship říká:

Posh Craze Finance Guide Seo Technical
nice post. very good.

23. 3. 2010 v 7.26


14. Dollar Items říká:

It 's a good job! Alloying chain bracelet Alloying chain neclace </p>

29. 3. 2010 v 9.04


15. lady bags říká:

everyone just do handbags lady bags golf bags

9. 4. 2010 v 4.57


16. replica watches říká:

replica watches
replica Tiffany Rings watches
<A href="http://www.dearwatches.com/rolex-watches-rolex-

26. 4. 2010 v 6.23


17. jersey říká:

Whitespace, pre a overflow v IE,Yuhů, klidně se rozepiš.

10. 5. 2010 v 3.05


18. Replica Handbags říká:

or design handbags. and other as Replica Louis Vuitton Handbags

13. 6. 2010 v 17.54


19. gucci říká:

Thank you very much.gucci bags sale gucci gucci handbags cheap gucci bags

21. 6. 2010 v 9.11


20. dsfds říká:

replica designer handbags Louis Vuitton Wallets

30. 6. 2010 v 10.01


21. dsfds říká:

replica chanel bags replica gucci handbags

30. 6. 2010 v 10.02


22. johnsupra shoes říká:

Tom Penny and Antwian Dixon. Apart from a large fan base compromising skateboarders, supra vaider high tophas also aught the attention of the music industries big names such as Jay-Z, Justin Timberlake and Lil Wayne. supra vaider black high boots, it is the main creative recreation sneakers teal we push in our online shop these days.

1. 7. 2010 v 2.38


23. johnhand říká:

Check out our new models, you can have your own Timberland boots mailed right to your door a few seconds from now. What are you waiting for? timberland boots uk. timberland boots were created closely and carefully designed to provide its wearer with comfort and protection necessary for outdoor activities.they continuetimberland Shoes
to adjust how and with what materials boots are made.

1. 7. 2010 v 2.50


24. Dream World říká:

Great! This article is creative? There are a lot of new ideas. It gives me inspiration. I think I will also inspired by you and think about more new ideas.Coat Dress Bar Food Replica Armor

1. 7. 2010 v 5.02


25. hollister uk říká:

hollister uk hhh great

26. 7. 2010 v 10.52


26. abercrombie fitch říká:

It's always nice when you can not only be informed, but also engaged! abercrombie and fitch

30. 7. 2010 v 15.42


27. tiffany online říká:

Well said, such a person should be a good sentenceed eyebrow with this as welltiffany outletlkjhgdfadzmnbcxv

2. 8. 2010 v 10.58


28. Wholesale accessories říká:

Greet,Speaking about the tattoo tattoo machineequipment supplies, tattoo machines are one of the major equipments without which the tattoo businesses cannot Wholesale Accessoriessurvive in terms of quality. This is the only reason why you will be able to find varieties China Wholesaleof latest tattoo kits including tattoo gun kits and dts tattoo supplies etc.

6. 8. 2010 v 3.03


29. Wholesale Accessories říká:

Greet,Speaking Kawasaki ZX12R about the tattoo quipment supplies, tattoo machines are oneKawasaki ZX- 6 R/636 of the major equipments without which the tattooYamaha FJA 1300 businesses cannot survive in terms of quality.

25. 8. 2010 v 5.01


30. UGG Boots říká:

This is theugg 5819 only reason why you will be able to find varietiesugg 5225 of latest tattoo kits including tattoougg 5359 gun kits and dts tattoo supplies etc.

8. 9. 2010 v 4.11

Zanechte komentář