box model differences in INPUT and SELECT

the default box-model seems to be different between the two tags

[Shores]

Hello!

I'm a newbie here, but I'm a long time php/html/css developer (10+ years of experience).

I have this problem: I'm working in XHTML1.0 Transitional, in IE 7, 8 and FF 3.

What happens is that having set height:22px both on my INPUT and SELECT elements, the INPUTs are 22px tall, while the SELECTs are just 18px.

Isn't this strange? Whatever the box model is on these elements, shouldn't it be the same on both INPUT and SELECT? While i wouldn't be surprised if i found that height:22px doesn't make them be exactly 22px high, i was expecting them to be of the exact same height, whatever would it be...

I found that if I add -moz-box-sizing:content-box; to the SELECT style, the both appear 22px high, albeit only in FF.

But I don't want to resort to proprietary CSS, also because box.-sizing is not available in IE7...

Any ideas on how to solve this in a cross browser and standard compliant way?

[swa66]

AFAIK styling form elements is a rather difficult part. The browsers are given a lot of freedom in how to do it (hint: take a look at e.g. FF3 on mac).

Still you can select the individual elements as you see fit.
The input element is the hardest of them all. But you have an option with selectors working on attributes:
input[type="text"]
IE6 doesn't do these though, so you'll need to either add scripted support for that or work in another way around it.

Easiest as always is to use conditional comments, that way you can separate out IE workarounds from the standards complaint browsers.

[Shores]

Thanks for your answer, but as i stated in my question i don't need to support IE6- , just IE7+ which has, AFAIK, support for many useful css selectors.

By the way, my problem is NOT a single browser problem, since the behaviour is EXACTLY the same in IE7, FF3, Opera 9.6 and Safari 3.1.2...

What i was trying to understand is why does the same rule height:22px produce two very different results if applied to input type=text and to select tags...

I'm already using a base style sheet for standard compliant browsers adding a second IE7 style sheet to correct IE bugs.

[jetboy]

Yep, at least in the browser you're using, text INPUTs have a 2px border while SELECTs don't. I couldn't say that this is universal though.

I'd govern the height of your elements with font-size if I were you, and maybe see what the browser support is like for line-height.

Don't use a padding reset (* {padding: 0;}) as you'll strip out the padding that Firefox uses in SELECTs and IE doesn't. Far easier to not break it in the first place than to have to hack together fixes.

[Shores]

I've resolved this way: since the box sizing algorithm for form widgets should be the border-box one (they are replaced elements such as IMG tags), the problem is NOT in SELECTs as i thought, but instead in input text and textarea: they get sized with the content-box algorithm, which is WRONG! So i wrote:

input.text, textarea
{
-ms-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-box-sizing:border-box;
}

And that solved the problem in all browsers, except for IE7 which i already feeded with a separate CSS since it has many bugs of its own... :)