Question

I have a styled button and a styled link (to match the button’s style). I’m testing it in Chrome 13, Firefox 6, and IE 9. The button and the link look identical in all three browsers, except in Firefox the link’s height is shorter. http://jsfiddle.net/AWcYG/

I can’t apply a height on the link, because it’s not a block level element. If I make it a block level element, I have to float both to get them aligned next to each other. Furthermore, the height is then off in all three browsers. I thought about absolute positioning, but then I don’t see a way to get them next to each other unless I hard code their location.

Besides using conditional statements, is there any way to make the button’s and the link’s height match in all of three browsers? Maybe a hack I don’t know about or maybe I’m missing something?

UPDATE:

@Wesley thanks for pointing me in that direction. I found out that Firefox adds the following to its 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 perfect, but in Firefox 6 it’s still off by 1px. I’ll probably research this a bit more and post another update if I find a fix, but even with just 1px off, it’s still much better than before!

UPDATE 2:

The fix I found was the specify 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 the height renders the button exactly the same, to the pixel, in all three browsers I was referring to.

Answer 1

Firefox seems to have special needs when it comes to <button> and apparently <input> buttons. Try this bit of mozilla-only CSS:

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

I remember being stuck on this long ago for a week, and someone in #css IRC showed me this trick, it seems to normalize the padding.

Demo: http://jsfiddle.net/AWcYG/1/ (Tested in FF3, 4, and 5, hopefully works in 6 too)