A simple page:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#btn, #btn2
{
border: solid 5px #FFA354;
background-color: #FFDB82;
width: 100px;
}
#btn { min-height: 50px; }
#btn2 { height: 50px; }
</style>
</head>
<body>
<form method="post" id="oogaboogabooga">
<input type="submit" id="btn" value="btn" /><input type="submit" id="btn2" value="btn2" />
</form>
</body>
</html>
is rendered as I expected (same two buttons next to each other) in Opera and Chrome, but Firefox 18.1 renders the first one lower than the second one with difference equal to border size in most cases. If I set display: block or float: left for the first one, that empty space at the top disappears, but the text inside is still misplaced, vertically higher than it should be. It seems when min-height is used, the text is positioned using bottom margin or padding of some kind disregarding border size.
Why is this happening? Is it a Firefox bug, intended feature or different intepretation of some standards? Is it possible to force Firefox to render the first button the same as the second one while still using min-height?
This is a firefox bug. You can track its resolution here: https://bugzilla.mozilla.org/show_bug.cgi?id=835873