Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

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í:

Komentáře

  1. Arcao http://arcao.com #1

    Rejp.

    …vyčaruje prohlížeč takovou nepěkná věc
    skloňování uteklo na vandr,

    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.
    a konec souvětí se přidalo. :)

  2. WhiteHat http://www.whitehat.cz #2

    avatar

    #1 Arcao, Můžeme o tom vést spory, můžeme s tím nesouhlasit, ale to je tak všechno, co se proti tomu dá dělat.

    před 10 lety
  3. Filosof http://blog.filosof.biz #3

    avatar

    Hezké :-) Jsem uchvácen!

    před 10 lety
  4. Fáčko #4

    #1 Arcao, Rejp.
    „…vyčaruje prohlížeč takovou nepěkná věc“ … úmyslně je to takhle (Cimrman)

    před 10 lety
  5. David Čepelík #5

    Skutečně hrubá chyba se však týká tlačítek v Internet Exploreru včetně verze 7 pod Windows XP (co Visty, ověříte?).
    Na Vistách to samé.

    před 10 lety | reagoval [19] David Čepelík
  6. singha #6

    Díky za užitečnou radu.

    před 10 lety
  7. Ivo Toman http://ivorius.com/webdesign/ #7

    Tak o té tabulce jsem to fakt nevěděl, díky. Jinak Jehiah vypadá jako zajímavý zdroj info

    před 10 lety
  8. Ikrk #8

    No podle těch shotů to vypadá, že s delším textem se i zmenšuje výška… Nebo se mi to jen zdá? Když by pak bylo víc tlačítek vedle sebe, tak by to asi taky nebylo zrovna optimální…

    před 10 lety | reagoval [13] David Grudl
  9. Jaroslav Menzel :-) #9

    [smazáno] A komu jinému než příjemci peněz z AdSensu na této stránce ten překlad pomůže, když o tomhle řešení už anglicky mluvící web ví? Nebylo by užitečnější využít překladatelský um na věci

    1. lidem prospěšné
    2. placené

    ? Jestli je tu spousta nadržených překladatelů, tak by možná mohli ocenit informaci, že anglická Wikipedie zdaleka nepokrývá českou kulturu tak, jak by mohla…

  10. Roman http://www.c64.sk #10

    avatar

    #9 Jaroslave Menzle :-), Neviem co riesis? Ja ked som pre DGXka prekladal dva clanky tak som to urobil dobrovolne, sam a velmi rad (v podstate som sa mu dokonca vnutil), pretoze som ich povazoval za EXTREMNE prinosne. V tomto pripade by som sa sice neponukol, pretoze mi nieco take ako riesenie „moc kockatych“ tlacitok v IE mi pripada tak trochu zbytocne, ale ked to autor (DGX) poklada za revolucne a rozhodol sa poprosit niekoho (kto si mysli to iste) o preklad, nemam co riesit. Vasil mi pripada ako zavistlivy hlupak a ty k takemu cosi (aj ked s pozlatkom altruizmu) tiez nemas daleko. S tou wikipediou si jednoducho totalne vedla, alias mimo mísu.

    před 10 lety | reagoval [11] Jako [23]
  11. Jako [23] #11

    #10 Romane, Závidím, ale ne autorovi blogu jeho peníze (možná jeho češtinářské a programátorské skily), jako spíš lidem umějícím angličtinu natolik, aby do ní mohli překládat. Právě proto jsem citlivý na to, když svého daru neužívají k čemukoliv užitečnému. Nebo na to, aby kdokoliv vyzýval ke smazání čehokoliv s hlavou a patou. Domluvil jsem.

    před 10 lety | reagoval [16] Onecar [18] Roman
  12. Roj http://roj.bloguje.cz #12

    avatar

    Mam dojem, ze dgx prave dela na necem, u ceho se vklada hodne vstupnich dat. :-)

    A ze tam nejak zalezi na tom, jak ty vstupni formulare vypadaji.

    A my z toho ted tezime vedlejsi produkty. Jeste ze nedela do vyroby veproveho :-)

    před 10 lety | reagoval [20] marek
  13. David Grudl http://davidgrudl.com #13

    avatar

    Velmi děkuji duu Adzio & Sovick4 za překlad článku! Dogooglit se k řešení titulního problému vážně není snadné, takže jsem přesvědčen, že překlad spoustě webdesignérů ušetří nervy a čas.

    Omlouvám se, že jsem zapomněl odstranit žádost o přeložení hned, jak mi Adzio překlad poslal, ušetřil bych Sovick4 práci, ale rozhodně nepřišla v niveč! Použil jsem mix obou, takové best of.

    Jo, trošku jsem musel promazat komentáře, sorry, protože po vyhození zmínky o překladu už nedávaly smysl, hlavně ne ty o Žirafčiných dětech, co s nimi má společného Pavel Kout, alkoholové opojení a … ;)

    #1 Arcao, ano, pravda, vypadlo mi tam slovo „zlý“, doplnil jsem :-)

    #8 Ikrku, to je asi zaohrouhlovací chybou, jak se to rozpixelovává. Ale fyzicky je stále stejně vysoký.

    před 10 lety
  14. David Grudl http://davidgrudl.com #14

    avatar

    #9 Jaroslave Menzle :-), a další…

    Motto: AdSense – moc to nevydělá, ale kolik závistivých lidí to nasere…

    před 10 lety
  15. eLKa http://www.elka.cz/edenik #15

    avatar

    #1 Arcao, Chybí ti základní vzdělání :-) Na začátek doporučuji Vyšetřování ztráty třídní knihy.

    před 10 lety
  16. Onecar http://jednoauto.com/blog #16

    avatar

    #11 Jako [23], Tak jestli taky mohu přiložit svůj názor, toto řešení (a mnoho jiných dalších!) máš od Davida zcela zdarma, myslím, že se mi to bude dobře hodit a kdyby tu ten překlad ještě nebyl, přeložil bych to.

    Zkrátka David pro nás píše kvalitní články, kvalitní projekty a to vše zdarma. Nikdy po nás nic nechtěl, nenutí nás klikat na AdSense a je jen na nás, jestli jsme vyžírky, nebo mu to nějak oplatíme.

    před 10 lety
  17. error414 http://www.error414.com #17

    Pokud si nějaký vzhled vědomě zvolím, ať už na úrovni operačního systému nebo prohlížeče (případ Opery), tak je v tu chvíli mou volbou a tedy tím, co mi nejvíce vyhovuje.

    Ja bych to neresil, je to ma volba ze sem si zvolil IE7 a ze to mam spatne vykresne.

    před 10 lety
  18. Roman http://www.c64.sk #18

    avatar

    #11 Jako [23], Este stastie ze si domluvil, este zopar novych nickov v tvojej osobe a mohlo by prist k naruseniu rovnovahy casopriestoroveho kontinua.

    před 10 lety
  19. David Čepelík #19

    avatar

    #5 Davide Čepelíku, Tak oprava, na Vistách už je to v pořádku. Byla to moje chyba někde jinde. Na zmiňovaném příkladu funguje na Vistách vše dobře.

    před 10 lety | reagoval [21] David Grudl
  20. marek http://www.bikenews.cz #20

    #12 Roji, daňové přiznání online? :)

    před 10 lety
  21. David Grudl http://davidgrudl.com #21

    avatar

    #19 Davide Čepelíku, na tomto ? (teď jsem jej přidal)

    před 10 lety
  22. Gringo #22

    avatar

    Zdá se mi to, nebo „such a nasty thing“ nemá takové grády jako v původní české verzi článku?

    před 10 lety
  23. Lokutus http://lokutus.bloguje.cz #23

    Jsem zvědavý, zda po článcích Dokonalé stylování formulářů a Ještě dokonalejší stylování formulářů přijde na závěr článek Nejdokonalejší stylování formulářů.

    před 10 lety
  24. džidžir #24

    Moc díky za pohled do současnosti. Mám totiž ve Win XP trvale zapnutý Win 2k vzheld, tak mi toto nedošlo. ;)

    před 10 lety | reagoval [26] Joey
  25. michal zobec http://www.lightninggroup.org/blogs/michal/ #25

    avatar

    #9 Jaroslave Menzle :-), tak já například své schopnosti věnuju české wikipedii :-)

    viz.:

    info o mě na mém blogu

    a

    profil na wikipedii

    před 10 lety
  26. Joey #26

    #24 džidžire, Přesně tak. Já jedu taky ve „standardním“ stylu (teda já tomu říkám standardní, ale on je asi standardní ten kulatý) a tam žádný problém není.

    Je to masakr, ale vypadá to, že IE7 není Windows ready aplikace (takové to Designed for Windows AKA Windows Logo Certification). Protože pokud chcete, aby vaše aplikace se mohla honosit tímto logem, musí splňovat řadu podmínek (jedno velké tlusté pé-dé-efko) a jednou z těch podmínek je, že musí správně pracovat s windows styly (což tady správně určitě není).

    před 9 lety
  27. Chester http://chesio.com/cz #27

    avatar

    Nechci být nositelem špatných zpráv, ale zrovna řeším tenhle problém a zdá se, že IE7 už zápisu input.button[class] rozumí… Asi si chlapci v Redmondu občas odskočí na Latrínu… :)

    před 9 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.