Niels Gamborgs online notesbog

Lodret alignment på knapper i Firefox og Explorer

april 22nd, 2011. Kategori: Browser bugs and fixes

Jeg har ofte oplevet problemer med at få teksten på især grafiske knapper til at stå korrekt. Sidste gang var det den lodrette alignment på knapper i Firefox, der drillede. Teksten på knappen sad for lavt og vertical alignment virker ikke på teksten på en  submit knap.

I første omgang lykkes det at opnå et rimeligt resultat med at bruge padding-bottom for at få hævet teksten på knappen op. Desværre ødelagde denne Firefox løsning til gengæld oplevelsen i både Chrome og alle alle IE browserne. Og løsningen endte i bedste fald i et kompromis, hvor teksten sad en smule for højt i IE og Chrome og en smule for lavt  i Firefox.

En grundig søgning på “vertical alignment input button” viste, at problemet var velkendt, og jeg fandt dette gode fix på stackoverflow: Fix af bug med vertical alignment på input submit element:

input::-moz-focus-inner {/*Remove button padding in FF*/
    border: 0;
    padding: 0;
}

I mit tilfælde var det border propertien, der løste problemet. Og linjen med padding kunne fjernes, da jeg havde fjernet eksisterende padding på knappen for at få visningen så ensartet som muligt i de forskellige browsere.

Fikset med moz-focus-inner  har dog den bivirkning at den stiplede linje i Firefox, der viser at knappen er aktiv forsvinder. Dette kan give problemer for brugere, der navigerer et website med tastaturet.

Browsernes forskellige default rendering af tekst og padding på knapper kan i det hele taget give problemer. En anden kendt bug er de meget brede knapper i Internet Explorer 7. Dette problem kan løses med følgende følgende bug fix: problemer med padding på knapper i IE.

 

  1. 3 Responses to “Lodret alignment på knapper i Firefox og Explorer”

  2. By Hans on apr 22, 2011

    Vertical alignment er noget fanden har skabt ;0)

    Min erfaring er at rigtig mange af de inkonsistenser man tit oplever i forskellige browser kan løse ved at give knapperne en line-height som matcher selv knap-højden.

  3. By Niels on apr 22, 2011

    Godt tip Hans.

    Kan ikke huske om jeg rent faktisk var omkring line-height løsningen i dette tilfælde. Men line-height er ellers er en fast bestanddel af værktøjskassen, når den lodrette alignment driller. F.eks. er line-height property løsningen ofte nyttig, hvis man skal have ensartet den lodrette alignment, som forskellige fonte på forskellige styresystemer kan skabe.

    Når jeg er tilbage på jobbet i næste uge, tjekker jeg lige om justering af linje-højden kunne have løst mit problem. Jeg vender tilbage med svaret.

  4. By Niels on apr 26, 2011

    Man kan sikkert godt fifle noget på plads med line-height, fordi den udelukkende tager fat i Internet Eplorer og ikke i Firefox. Jeg skulle dog op på “vilde” værdier ca. 40-45 pixels inden linje højden tog effekt i IE browserne. Så ja, line-height kan være et alternativ.

    Men jeg foretrækker så klart løsningen med input::-moz-focus-inner, som tager fat i den problematiske browser, som i dette sjældne tilfælde så er Firefox. 😉

Skriv en kommentar