Button Height and a Broken Box Model

When I figured out the workaround for line-heights in form buttons last week, I also discovered an interesting discrepancy (feature?) across all major browsers in terms of buttons and the box model. Check out this article for a more in-depth refresher on the CSS Box Model, but here’s a brief summary:

Let’s say I have a div styled like so:

div {
height: 30px;
padding: 10px 0;
}

The box model states that the resulting box will take up 30px of vertical space for the div’s contents, plus an additional 10px on the top and bottom for the padding, for a total of 50px vertical space taken up by our div.

Back in the day, the problem was that while most browsers accepted this “standard” box model, Internet Explorer decided to be all rouge-ish and maverick-y and come up with a box model of their own. In their model, the entire div should take up 30px of vertical space, which would mean in our example above that 10px was subtracted from the top and bottom of the div’s interior to make room for padding… meaning there was only 10px left over for the div’s contents.

As you can imagine, this caused all sorts of problems for web designers trying to design for both box models. There were workarounds of course, but they bloated our code and made our lives just that much less glamorous. I mean, who has time for champagne pool parties when you’ve got to write browser-specific stylesheets?

To be fair, Internet Explorer has since begun to adhere to the standard box model. Old pages that used the old box model still work as such in “Quirks” mode, while new standards-compliant pages are rendered appropriately in “Standards” mode (there’s an article on Quirks vs. Standards modes here).

Back to the Future

So what the heck does this have to do with us? After all, we live in The Future. Well, as far as I can tell, buttons still use the non-standard box model. And the strangest thing to me is, this holds true in every single browser I tested: Chrome, Safari, Firefox, Opera, and Internet Explorer.

Let’s look at an example. Here’s the (essentially identical) CSS for a nice input-style submit button:

button {
height: 30px;
padding: 10px 0;
}

I’ve specified a height of 30px and top and bottom padding of 10px, which according to the box model should result in a total height of 50px overall, right? Except as you can see in the image up top, Firebug (running in the most recent edition of Firefox) reports a total height of just 30px: it’s subtracting the padding I’ve applied, in addition to the height of the default button borders.

Which means that, in addition to Firefox ignoring line-height on buttons, it also ignores the modern box model altogether!

So what gives? What makes a button any different than any other element on the page? I wish I knew. In fact, if you do happen to know the answer to this riddle, please share with the class in the comments below. Until then, I don’t have a solution to this particular peccadillo. But knowledge is half the battle!

from cssnewbie.com