Geek Answers Handbook

A link designated as a button is inconsistent in height

I have a stylized button and a stylized link (to fit the style of the button). I am testing it in Chrome 13, Firefox 6 and IE 9. The button and link look the same in all three browsers except Firefox, the link height is shorter. http://jsfiddle.net/AWcYG/

I cannot apply height in a link because it is not a block level element. If I make this an element of the block level, I have to swim as to align them with each other. In addition, the height in all three browsers is disabled. I was thinking about absolute positioning, but then I see no way to get them next to each other unless I hardcode their location.

Besides using conditional operators, is there a way to make a button and link line height in all three browsers? Maybe a hack that I don’t know about, or maybe I missed something?

UPDATE:

@Wesley thanks me for pointing me in that direction. I found out that Firefox adds the following buttons, which explains why your code does what it does:

button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; }

The result is very close to perfection, but in Firefox 6 it is still disabled by 1px. I will probably study this a little more and post another update if I find a fix, but even with a single 1px press it is still much better than before!

UPDATE 2:

The fix I found is to indicate the height on the button:

 .db .menu input, .db .menu a { background-color: #01137F; border: 1px solid #fff; border-radius: 5px; box-shadow: 2px 2px 3px #666; color: #fff; cursor: pointer; font-family: Arial, sans-serif; font-size: 14px; height: 26px; padding: 4px 10px; }

Adding height makes the button exactly the same as a pixel in all three browsers that I talked about.

+4
source share
1 answer

Firefox seems to have special needs when it comes to the <button> buttons and, apparently, the <input> buttons. Try this CSS bit for Mozilla only:

 .menu input::-moz-focus-inner { padding:0; border:0; }

I remember how long it was delayed this week, and someone from IRC # css showed me this trick, it seems, normalizes the addition.

Demo: http://jsfiddle.net/AWcYG/1/ (Tested in FF3, 4 and 5, I hope it works in 6 as well)

+6
source

More articles:


All Articles