Misplacement of submit type input in Firefox when using min-height

StackOverflow https://stackoverflow.com/questions/14587372

Question

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?

Was it helpful?

Solution

This is a firefox bug. You can track its resolution here: https://bugzilla.mozilla.org/show_bug.cgi?id=835873

OTHER TIPS

Change the value for verical-align, from baseline to middle or something else for both.

Edit: consider using the <button> tag

please use this css

     <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;
        float:left;
        margin:1px;
        height:50px;
        line-height:50px;
    }

</style>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top