Different height of buttons

[thesealion]

If you place together a normal button and an anchor with class="button", you'll notice that they have different height. And it looks really ugly.

[dhg]

You just need to add a class .button to the tag and it will look exactly the same. This was intentional so that the style was tied to that class and not to the tag.

[thesealion]

No, this doesn't seem to work. I looked at the css and there are no rules for button.button or just .button, only for a.button.

[dhg]

Right. Unless I'm mistaken (and I did a quick Firefox/Chrome check) adding the class button to the button element styles it properly. (e.g. <button class="button">Text</button>). Let me know if this is more specifically an IE issue or if there is something I am missing!

[thesealion]

Here's what it looks like in Firefox 7.0.1: http://charadeyouare.org/buttons.png
You can clearly see the difference. Adding the class has no effect.

[thesealion]

Any comment on that?

[dhg]

Sorry for the belated response - yes those are definitely different! I will investigate and try to commit some changes soon. Thanks for pushing on the issue (been busy and tough to keep up). Thanks so much!

[necolas]

This is because you've set a line-height value other than normal on L158

Taken from the normalize.css wiki:

button, input {}
line-height: normal : FF3/4 sets line-height using !important in the UA stylesheet. This declaration is to set all other browsers to match the FF3/4 style.

[dhg]

Added line-height: normal, but still have the 1px difference in Firefox for button. Will have to investigate further.

[necolas]

You probably need these lines: https://github.com/necolas/normalize.css/blob/master/normalize.css#L404

[dhg]

@necolas You're the man. Fixed it. Glorious.