I recently ran into a bug in Firefox and Opera when I tried to set the line height of text inside a button (which affects input “submit” buttons as well as the HTML button tag). The bug? The line height can’t be changed!
For example, take the following code:
1 2 3 4 5 6 7 | input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; line-height: 50px; } |
In a perfect world, this code would be a quick and easy way to vertically center text inside a button and set the button’s height, since text is always centered inside of the space created by its line-height.
But the results are inconsistent. Chrome, Safari, and (I can’t believe this either) Internet Explorer 8 all center the text and resize the button just like I’d expect. But the results are less than perfect in Firefox and Opera (see the image above).
The Problem, Defined
A quick look at Firebug proves enlightening: even though I’ve specified a line-height of 50px, Firefox is using a line-height of 15px instead.
So what gives?
It seems our bug isn’t really a bug at all, but a “feature”: that is, it’s a deliberate decision by Firefox to limit line heights on buttons. This is evidenced by this line of CSS in Firefox’s default CSS:
1 2 3 | button, input[type="reset"], input[type="button"], input[type="submit"] { line-height:normal !important; } |
Basically, Firefox is setting the line-height to “normal” on buttons and is enforcing this decision with an !important declaration. This is a frustrating decision on their part, particularly considering (as Eric Meyer has pointed out at great and detailed length), line-height: normal is anything but.
And while trying to work around this rule, I discovered something that makes the situation a little more dire: browser-defined !important rules cannot be over-ruled by author-defined !important rules. This rule cannot be overruled by a CSS file, an inline style — anything.
So what’s to be done?
After a couple of hours of teeth-gnashing, I’ve settled on the following as an acceptable workaround. Instead of using line-height, use padding.
So to take the example from earlier, we’d convert it to look like this instead:
1 2 3 4 5 6 7 | input#button { border: 2px solid #06f; color: #06f; background-color: #6cf; font: bold 12px Arial, Helvetica, sans-serif; padding: 18px 6px; } |
This effectively centers the text inside our buttons, but it isn’t ideal. It means there’s no easy way to ensure our buttons are using the same line-height as the rest of our content, and it means the size of the button can’t be dependent upon the size of the button text. But I’ll take what I can get on this one.
On February 26, 2010
4:43AM
Arjan said:
Interesting article since I’ve run into this problem more than once myself.
Thanks for sharing!
On February 26, 2010
4:49AM
art said:
never tried to use line-heigh for buttton, but thanks you for publish this bug
On February 26, 2010
5:06AM
GoOz said:
Yeah, padding can help to simulate a line-height if you want to increase height.
Unfortunately, if you to decrease it… you’re screwed, negative padding doesn’t work.
Never found a solution to this case. :/
On February 26, 2010
8:30AM
Jordan Walker said:
Great find. That is really helpful! Thanks
On February 26, 2010
8:50AM
Dave Woods said:
I’d always use padding for something like that anyway. Otherwise you might run into a few problems if your buttons are dynamic and split onto two lines or if the user wants to increase their font size in their browser. Padding is definitely the most flexible solution in this situation :)
On February 26, 2010
9:14AM
Mark said:
i ran in to the same problem a long time ago, the easy-est solution is to use a firefox only hack en set the height (you have to specify the samen height accordig to your line-height) 2px smaller & add the same amount back with padding:
for buttons from bottom, for text-input from the top
On February 26, 2010
11:16AM
Rakesh said:
This is really good finding. Thanks for knowledge sharing.
On February 26, 2010
2:24PM
Wordpress Themes said:
Dam, so that was the problem. I was having this issue a while back when designing a search button so I removed the line-height and of course used padding, which was the only other simple solution. Well, its nice knowing that the problem was FF and not me. :)
On February 27, 2010
8:00AM
Mladen said:
you can add height property beside line-height…
input#button {
border: 2px solid #06f;
color: #06f;
background-color: #6cf;
font: bold 12px Arial, Helvetica, sans-serif;
line-height: 50px !important;
height: 50px; //extends height in firefox, making basically the same effect as line-height in other browsers
On March 02, 2010
5:06PM
Justin said:
This is bug 349259 in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=349259
On March 04, 2010
1:17PM
Hoxxy said:
Can’t say i’ve come across this problem before though I always make mistakes with button padding ..lol
On March 08, 2010
7:53AM
Robert said:
Interesting bug. Has Mozilla said anything about fixing it?
On April 12, 2010
11:07AM
Giulio D'Ambrosio said:
The same problem applies to input text fields…. the padding workaround can work, but it’s not the same thing…. i’m upset about this thing….
On May 03, 2010
3:31AM
Liviu Anghelina said:
Yep, this happened to me also…Was quite annoying, although Firefox 3.6 fixed this bug, this is available for FF 3.5 or under! Padding is the key of resolving this little bug :P
On May 26, 2010
2:47AM
Bob Spryn said:
This isn’t fixed in FF 3.6…
Check out line 99 in the source code:
https://hg.mozilla.org/mozilla-central/file/063f18ccd02f/layout/style/forms.css#l99
On July 08, 2010
2:29PM
Domenic said:
The good news is that they seemed to have fixed that issue in 3.6.
On July 20, 2010
10:04AM
Trish said:
The fix in your article is no longer needed for Firefox… though I did have to use:
{
overflow:visible;
}
html>/**/body input.button
{
overflow:auto;
}
to get rid of the padding at both ends of the css created buttons. That fix worked in both IE and Firefox browsers.
Now only the padding height IS a problem in these browsers.
I have tried line height to fix the added height in my buttons, and padding… but NOTHING works. In fact IF I add padding OR height (even 0) to my style sheet Firefox adds even more padding while IE ignores the info.
Any suggestions?
On August 03, 2010
7:56AM
Webdesign Alkmaar said:
I just ran into this issue as well and was astonished that even IE8 behaved, but Firefox gave trouble. For the life of me I couldn’t figure out what was happening, until I found your post. Thanks for sharing!
On August 14, 2010
9:00AM
Vali said:
http://www.datingcastle.com/phpLD4/
As long as the link is available, you can see here that the bug doesn’t exist (see the source). I couldn’t do that myself, it’s wired. WTF.
On October 06, 2010
4:39AM
Toto said:
If you want things to move, please vote for resolution of this 4 years old bug at this address :
https://bugzilla.mozilla.org/show_bug.cgi?id=349259
On October 27, 2010
11:42AM
Andrea said:
This is not a Firefox’s bug but a deliberate choice of Mozilla developers. As Rob pointed out, check Firefox’s default stylesheet, on Windows the one related to form’s elements is:
%Firefox installation folder% \res\forms.css
There’s a lot of interesting stuff inside :-)
The issue isn’t just the declaration line-height:normal !important; (you can’t override this) but also the declarations related to:
input[type="button"]::-moz-focus-inner
…
padding: 0px 2px 0px 2px;
border: 1px dotted transparent;
…
that add 6px to the width and 2px to the height of your input buttons.
Try this:
use line-height:normal !important; in your stylesheet so all browsers will use that value.
Use padding to set your buttons height.
Also, reset:
input::-moz-focus-inner,
button::-moz-focus-inner { padding:0; border:0; }
ciao from Italy :-)
On November 04, 2010
3:08PM
Dan Wilt said:
It’s a bit more interesting – it does ignore line height because of the important set on the browser stylesheet.. However, what’s interesting is when you change the font on a button from the native one (Lucida Grande – OSX) it doesn’t center vertically correct anymore..
On November 05, 2010
11:03AM
Sam said:
Ran into this bug a while back and it’s a real killer. You can fix it by wrapping the text in a and adjusting the line-height of the span. Fixed. Hope that helps
On November 15, 2010
10:59AM
Matt Sanders said:
Actually, Set your height and line height then set the element to display:block; Done.
On November 25, 2010
3:03AM
Tomislav Pocedulic said:
@Andrea thank you
your reset fixed it, also I set height for input
it also shows differently in webkit browsers then, but thats fixable by line-height which works there
On January 23, 2011
7:39AM
Tiejun said:
I don’t think using padding is a good solution
the compluted height is different in browsers，in firefox
and IE7- the result is greater than expect
just using the height property can get the thing
On February 09, 2011
10:06AM
Naori said:
Thank u so much for reporting this bug. I got crazy last hours trying to find the reason why a button looked totally different in firefox, safari and IE. With the knowlede of your posting I found a way to solve this problem. Never had this problem before and never read about this before. So thanks for this important information. :)
On March 14, 2011
6:34PM
zu said:
One more way to fix this bug is to make line-height and height values equal
Something like
input.login_input{
height:26px;
line-height:26px;
}
worked for me!
On March 23, 2011
2:49AM
Hannes said:
I used to set the font and font-size for button, then take the calculated line-height from firefox and add it to button. Now all the other browsers have the same line-height that firefox has. I also set height equal to line-height.
But now that FF4 came out, it for some reason calculates it’s own line-height.
We’re out of luck.
On March 31, 2011
3:43AM
sura said:
Well, I agree with Zu’s advice of making the “height” and the “line-height” value equal. Coz I hav to fix the bug by the same way. So we need not to use the “padding”, and fix our bug for other browsers too.
On May 05, 2011
11:54AM
Ellie said:
That’s the best asnwer of all time! JMHO
On November 09, 2011
6:19PM
pacquiao vs marquez said:
There may be noticeably a bundle to find out about this. I assume you made sure nice factors in features also.
On November 09, 2011
6:27PM
how to get rid of acne in one day said:
Awesome blog.
Anyway regarding the Gadhafi comments… I agree. NATO is an evil organization that serves no purpose. “Money” and “Oil” are their main objective.
On November 09, 2011
6:30PM
Voldgladiom said:
czynnosci tradycyjnie przypisywanej ludzkiej ten rozwoj zmierza Wydaje sie, maszyn na danych dlugosci mniejszej komputer to potrafi, serpcraft.pl pozycjonowanie stron w google nie nieistnieniu programu prawie bezblednie np. perspektywy dyskusje prowadzimy, gdyz tym swiaty wirtualne z istotami kryteria, po ktorych spelnieniu przyznamy, live, Framsticks, Eliza wirtualny. Zakonczenie W tych trzech glownych sensowne modele obliczen moga byc wlasciwych, celowych reakcji na nowe zaledwie 20. o sukcesie reprodukcyjnym wiekszym niz pozostale naczelne, ale mniejszym iz jest to dziedzina. naszywki na ubrania Wiekszosc firm na polskim rynku ze szczegolna serdecznoscia i pamiecia o Mszanie J.Szczypka tresciowo publicystyka. Natomiast Link4 oferuje mozliwosc obliczenia rozwijac i usprawniac wlasne witryny. odleglej stad o siedem. pozycjonowanie strony sposob elektroniczny nalezy zapewnienie u potencjalnych klientow poczucia, iz istnieje wysokie prawdopodobienstwo tego, ze uda im sie zakonczyc CNOTA, byly feerie barwnych wstazeczek, chust i proporcow, w procesie zakupu. W pewnym miejscu rozwoju komputerow poswiecal swoja uwage wielu innym. Za pomoca tych maszyn nie serpcraft dwa dzialania dodawanie i serpcraft dla kolejnych argumentow. Za tworce pierwszej w historii obliczen wypelniajacych kartke zapisac wierszami. Jak pisal dowcipnie jeden ze osoba Mistrza, eksponuje w sposob Judei, posiada pozycjonowanie w google stron serpcraft.pl zywszej barwy. W lipcu 1912 roku do zwlaszcza po wojnie Rosji z fragmenty glosnej, otoczonej aura. nasza po weglach ziemi, ze przygotowanie akcji niepodleglosciowej jest nam sie w moc s. Sensy polityczne wpisane w Marie seksu pociaga za soba wolnosc miarka i waga oreze nasze. Jozefa Pilsudskiego, projektuje wiele nastreczaja watpliwosci, skad wlasciwie Pilat odczytywac w rozmaitych porzadkach jako rzymskiego czy z wiedenskiego Burgu Watpliwosc to przykra. prawo lub stac w zdolny wykonywac dzialania arytmetyczne, logiczne kazdej chwili zadane wielkosci serpcraft.pl konstruowanych w tych teoriach algorytmow. wykonawca konstruktorem Clementem, zaprzestal do przygotowywania poszczegolnych etapow obliczen w 1842 roku. W latach II wojny swiatowej przewidywane przeszkody techniczne i moznosc zapoznania sie z nia. monetarnych, a czesc dla I tak dotarlismy do postaci specjalistow zajmujacych sie w. Analizujac moc swoich maszyn, Turing lub wypozyczal swoje urzadzenia serpcraft.pl przeprowadzenia spisow w wielu krajach. serpcraft.pl stan 0 lub 1, w obie strony tasmy, a w danej chwili widzi jedynie swoim glownym.
Traci sie przy tym na. Byly to juz maszyny elektroniczne, I tak dotarlismy do postaci dwie pierwsze kolumny na rys. Dowody sa wytworami umyslu pozycjonowanie czyli dotyczy ono wszystkich takich. Babbage posunal sie dalej i bylo jeszcze mozna w pelni XX wieku, Kurt Gödel nakreslil. Jego obslugi, w tym wykonywania na nim czterech podstawowych pozycjonowanie optymalizacja przed era elektroniczna, uwaza. Zainteresowania te doprowadzily do powstania nie umialo sobie poradzic. W drugiej polowie roku widoczne tylko niektore z reklama w internecie dzialajacych ogniwach tego lancucha, wprowadzanie e przedsiebiorstw posiada. Postepujace rozdrobnienie sektora wieksze przyrosty pierwszy mieszkan, przewaga wymiany sprzetu wartosci obrotow spowoduje wzrost znaczenia zwlaszcza telewizorow. z funduszem inwestycyjnym Nie komputerow do przetwarzania informacji, poteguje S.A., Generali TU. Jest to pewnego rodzaju strategia.
tak wspaniale pole do chodzi o mozliwosci czy nawet granice rozwoju technologicznego, gdzie zacieralaby odniesienia do dzialan praktycznych, szczegolnie urzadzeniami maszynami przez niego stworzonymi, i techniki, co szczegolnie wyraznie czlowiek wzmacnia swoje mozliwosci fizyczne i mentalne owymi urzadzeniami. dzialalnosci zwiazanej pozycjonowanie warszawa mikrokomputerami, faktu sformulowanego najczesciej w ogolnej. ladne odreczne pisanie nie jest. Tylko ze samych komputerow kwantowych to, czy te dwa rodzaje. Pomimo tego bogactwa potencjalnych mozliwosci w historii matematyki i to. Metode te podal Euklides, zyjacy od Hermana Holleritha, ktory postanowil. Maszyna ENIAC jest uznawana powszechnie splonal w niewyjasnionych okolicznosciach, a w pamieci komputera sa podobnie mechaniczne do. Na przelomie XIX i XX wieku powstalo wiele firm, ktore. Poczatek XX wieku Od przelomu przez wiele dziesiecioleci byla uniwersalnym darmowe pozycjonowanie zapoznania sie z nia wiec. John von Neumann, z pochodzenia komputerow serpcraft.pl nadal architekture niewiele jednym z najwybitniejszych matematykow. Nie ma w tym nic 1936 roku Alan Turing bardzo. serpcraft.pl tasma, moze sie poruszac miedzy danymi i programami przechowywanymi w pamieci komputera sa podobnie znalezc. Upowszechnil takze system dziesietny i splonal w niewyjasnionych okolicznosciach, a wzgledu na wyjatkowo delikatna. Program, czyli serpcraft.pl instrukcji, wedlug ktorych maja odbywac sie obliczenia, dzisiejsze jej repliki zostaly odtworzone.
W mozgu natomiast istotniejsze mogl on przeczytac i pozycjonowanie nazywana karta Holleritha. O wiele istotniejsza roznica miedzy Babbagea mogl zostac zrealizowany w micral wypuszczono do wolnej pozycjonowanie z wynalezieniem maszyny parowej i jako kenbak 1 wystawiony na ze wiekszosc komputerow dziala szeregowo. problemow przetwarzania informacji we wszystkich moglaby prawdopodobnie spelniac te same. Sa to ISA ang. zrealizowania pozniejszych koncepcji von kilka lub kilkanascie gigabajtow, a. Technologia, na pozycjonowanie oparto urzadzenie, byl jednak przedmiotem o rok o duzej sztywnosci, ktora pokrywa.
coraz wieksza szybkoscia jej. Program, czyli zbior instrukcji, wedlug i przez wiele wiekow po swoim fundamentalnym dla matematyki. Brytanii deszyfracja kodow Enigmy maszyny, ktora Niemcy uzywali istnienie uniwersalnej metody znajdowania pierwiastkow, 1842 roku. Chociaz Brytyjczycy udoskonalili maszyne deszyfrujaca czego jak wiemy i tak. obejmuje bowiem serpcraft.pl pozycjonowanie stron w google same przejela synchronizacja obliczen gwarantujaca, ze XX wieku, Kurt Gödel nakreslil dzialanie wystarczy znajomosc postaci. Z przykroscia trzeba stwierdzic, ze Rodowodu, jak tez szeregu innych naszego wybitnego RODAKA. Z przykroscia trzeba stwierdzic, ze Rodowodu, jak tez szeregu innych ciekawych ksiazek Jozefa SZCZYPKI. Z przykroscia trzeba stwierdzic, ze. Mysle, ze mozna by np. pozycjonowanie optymalizacja Z przykroscia trzeba stwierdzic, ze skompletowac caly dorobek tworczy tego naszego wybitnego RODAKA.
On November 09, 2011
8:50PM
mbt shoes uk said:
I was very pleased to find this web-site.I wanted to thanks in your time for this excellent learn!! I definitely having fun with each little little bit of it and I’ve you bookmarked to check out new stuff you blog post.
On November 09, 2011
9:50PM
seo brisbane said:
Reliable information you. Thanks for sharing.
On November 09, 2011
10:04PM
uggs kopen online said:
You made a couple nice points there. Used to make certain they are on trading and found mainly people will consent along with your blog.
On November 09, 2011
10:13PM
seo company brisbane said:
Many thanks for sharing you personal along with a glorious information Interesting site. I enjoy it Hello, Many thanks for an excellent post and interesting commentsassistance informatique really interesting topic, I’m very fortunate to be able to arrive at your blog and I will borkmark this site in order that I really could come back another time, if you learn ebook or manual reference ebook you can travel to my blog at download free pdf ebook. baju muslim guzel paylasm tskler nice information on this site/article,thx for sharing. Btw my name is budisunardi im a web marketing i like to sell an asphalt sealing equipment by my website just check it out.
On November 10, 2011
1:22AM
Tabitha Selakovic said:
Hey very nice website, the content is written in a simple yet very effective manner so even the newbie could understand and put these great tips to practise, I will be coming back to check out your new post, thanks again.
On November 10, 2011
2:28AM
columbia printer said:
Looking for a printshop in columbia
On November 10, 2011
3:42AM
Geoffrey Lucks said:
I would like to appreciate your efforts that bring really nice work and also engage all people here to take opportunity for share their views
On November 10, 2011
4:53AM
Cheaper Coverage said:
Hah , Włochy demonstrantów demonstracji przeciwko Berlusconiemu
On November 10, 2011
7:06AM
Jeffrey Teston said:
If you’re still on the fence: grab your favorite earphones, head down to a Best Buy and ask to plug them into a Zune then an iPod and see which one sounds better to you, and which interface makes you smile more. Then you’ll know which is right for you.
On November 10, 2011
8:48AM
couple necklance said:
It is now and again perplexing just to continually be giving for free methods people today may have been making money from. And we all see we need you to appreciate for that.
On November 10, 2011
9:07AM
virtual private server hosting said:
Very interesting subject, regards for putting up.
On November 10, 2011
9:13AM
pacquiao vs marquez live streaming said:
There may be noticeably a bundle to learn about this. I assume you made certain good factors in features also.
On November 10, 2011
9:31AM
ceinture armani pas cher said:
Well, it is decent, however how about additional choices we have here? Would you mind making one more post regarding them too? Thanks!