Problém širokých tlačítek v IE

Jak již víte, webové formuláře je potřeba stylovat opatrně, protože už jejich nativní podoba bývá často tím nejlepším, čeho lze dosáhnout.

Někdy má ale i výchozí podoba své mouchy. V komentářích k předchozímu článku se jako problematické ukázalo zarovnání checkboxů s popisky ve Firefoxu. Skutečně hrubá chyba se však týká tlačítek v Internet Exploreru (včetně verze 7) pod Windows XP. Je-li popisek na tlačítku dlouhý, vyčaruje prohlížeč takový zlý, nepěkná věc:

(vyzkoušejte si)

Jde o kombinaci hned dvou chyb:

• tlačítka jsou zbytečně moc široká
• velká tlačítka se vykreslí zubatě a divně

S druhou chybou asi nic udělat nepůjde. To je prostě chyba ve vykreslovacím jádře prohlížeče a lze ji leda reportovat vývojářům a doufat, že třeba někdy…

Zajímavé je, že čím je tlačítko širší, tím ošklivěji se vykreslí. Takže vyřešením první chyby, tj. donucením Exploreru, aby tlačítka zúžil na odpovídající šířku, by se měl zmírnit či dokonce odstranit i efekt zubatého vykreslení. Uvidíme.

Zužujeme tlačítko

Pokusy nastavit různé hodnoty pro width nebo padding k ničemu nevedly. V takové chvíli se webdesigner uchýlí ke střelbě naslepo v podobě experimentování s CSS vlastnostmi jako display, overflow, position atd. Ukázalo se, že nápravu sjedná overflow: visible. Pak ale tlačítko těsně obepíná popisek, takže je záhodno ještě doplnit padding.

input.button {
	padding: 0 .3em;
	overflow: visible;
}

A vidíte? Zúžení tlačítek zcela eliminovalo vykreslovací vadu u druhého z nich, v případě třetího ji alespoň zmírnilo.

Pocit vítězství nad digitálním nepřítelem jsem si vychutnával přesně do chvíle, než jsem formulář s dlouhým tlačítkem naformátoval do tabulky a ejhle:

Ačkoliv se tlačítka vykreslují se správnou šířkou, v tabulce zabírají své původní místo. Problém vyřeší width:0. Jenže lepší prohlížeče (Opera, Firefox) nulovou šířku skutečně respektují, je tedy nutné použit IE-only hack. A to už je známá pohádka. Buď dát za vděk vylepšenému „podtržítkovému hacku“, tedy =width:0 (pro IE7 je nutné podtržítko zaměnit například za rovnítko), nebo oddělit styl pro IE pomocí podmíněných komentářů.

Zabrousil jsem na Google a pokusil se najít jiná řešení. Stejný zápas absolvoval jistý Jehiah Czebotar a po třech kolech s pomocí čtenářů došel k velmi podobnému výsledku, ale s jednou elegantní fintou navíc!

Zde je řešení:

/* chyba roztazenych tlacitek v IE pod WinXP */

input.button {
	padding: 0 .25em;
	width: 0; /* pouze pro IE */
	overflow: visible;
}

input.button[class] { /* IE ignoruje [class] */
	width: auto;
}

Finta spočívá v odlišení lepších prohlížečů od IE7 validní cestou. Díky tomu není potřeba „rovnítkový hack“ ani extra soubor se stylem. Kód tedy můžete použít pro všechny prohlížeče. Enjoy!

Související:

• La Trine: Dokonalé stylování formulářů
• La Trine: Ještě dokonalejší stylování formulářů