homepage Welcome to WebmasterWorld Guest from 54.211.68.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
box model differences in INPUT and SELECT
the default box-model seems to be different between the two tags
Shores




msg:3834757
 3:37 pm on Jan 26, 2009 (gmt 0)

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




msg:3834862
 5:24 pm on Jan 26, 2009 (gmt 0)

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




msg:3835065
 8:51 pm on Jan 26, 2009 (gmt 0)

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




msg:3836815
 8:46 pm on Jan 28, 2009 (gmt 0)

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




msg:3837459
 3:48 pm on Jan 29, 2009 (gmt 0)

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... :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved