Fleegix.org

Form input buttons and the box model

2006-07-15 00:42:00

I was playing around with styled buttons and text inputs for forms yesterday, and ran into an interesting (yeah, we all know what that means) CSS issue.

A text input and button input with identical styling (it was something like height:24px; border:1px solid #aaaaaa; padding:2px;) actually display with totally different heights -- and vertically out of alignment to boot. And oddly, it was broken in pretty much the same way in both Firefox 1.5 and IE6.

I made the unfortunate mistake of poking my head into #css on Freenode to ask if anyone else had seen this. And after placating the silly punks in there who think they're participants in some sort of feudal tribute system, I found that nobody had the foggiest clue what might be causing it.

After doing a bit of poking around with Firebug's DOM inspector, I finally realized what was going on. Once I knew what to Google on, I found that it was a documented bug with both Firefox and IE.

Even in Standards Compliant mode, button inputs use the old box model where the style's height and width reflect the size of the container, not the content in the container. Of course, submit (being kissin' cousins with button) inputs also suffer from this same malady. Hooray!

The text input uses the correct W3C box model, so they naturally don't match up.

I would love to know why it does this -- it's broken the exact same way in both creaky ol' IE and modern Firefox. Honestly sometimes with this stuff you feel like you're playing a game of Fizzbin or something.

"Form element? In IE? What is it? Oh, a select input. No, you can't put anything in front of that. It's a native Windows control. What? A radio button? Nope, not with DOM methods. Ah, a button. Oh, okay, in Mozilla. Well, you can, but it uses the old box model. Except at night, when you want a queen and a four."

About

This is the blog for Matthew Eernisse. I currently work at Yammer as a developer, working mostly with JavaScript. All opinions expressed here are my own, not my employer's.

Related

Previous posts

All previous posts ยป

This blog is a GeddyJS application.