Width of SELECT and INPUT not the same

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
User avatar
Pim
Posts: 2215
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Width of SELECT and INPUT not the same

Post by Pim »

If I create two controls on a page, an INPUT and a SELECT, and I give them both the same width, they come out differently.
For instance in this HTML file
http://h1.ripway.com/Mr_Lister/Temp/Test.html

where the relevant CSS is:

Code: Select all

input, select {font:normal 16px/1 serif; width:16em}

the textbox is rendered a few pixels wider than the dropbox.

When I look at the page with the DOM inspector and check the "computed style" of the items, the width of the INPUT is 256 pixels while the SELECT is 252 pixels.
So what am I doing wrong?
(I know that it's something that I'm doing wrong and not a bug in Mozilla, because Opera agrees that the textbox should be a bit wider, and I'm not going to argue when Opera and Mozilla are in agreement with each other.)
Last edited by Pim on October 26th, 2009, 7:58 am, edited 1 time in total.
Groetjes, Pim
User avatar
peter.reisio
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm
Contact:

Re: Width of SELECT and INPUT not the same

Post by peter.reisio »

You're not doing anything wrong — most browser vendors (including Mozilla), do not want you to be able to style form controls. They don't care if you make the entire page have a fuchsia background with fuchsia text and flashing hamster GIFs, but oh noes please don't style form controls! :p

There are a couple simple workarounds, though:
  1. set different widths for input's and select's
  2. replace select's with your own custom drop-downs (you can make them work with onmouseup instead of hover if you care), giving you more control over it all
User avatar
Pim
Posts: 2215
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Re: Width of SELECT and INPUT not the same

Post by Pim »

Thanks for your answer.
Hm... most of the other styles (font, colours etc) work OK on controls. There are some discrepancies between browsers, but I can live with that. What I do hate is when all browsers (IE7 too in this case) are consistent in their unexpectedness.
Oh well.
I think I'm going to give all the inputs on the page different widths, so it won't be obvious that one of them is out of sync.
Groetjes, Pim
User avatar
Pim
Posts: 2215
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Re: Width of SELECT and INPUT not the same

Post by Pim »

Looking further with the DOM Inspector, I noticed that the -moz-box-sizing property for the dropdown list was set to border-box.
As far as I'm aware, that shouldn't happen... the W3C demands that the default value for box sizing is always content-box. Unless I'm mistaken.
Anyway, I explicitly set it to content-box in the stylesheet and now it works.
Opera supports the box-sizing property, so putting that in the stylesheet alongside -moz-box-sizing made Opera display it fine too.
Now to get it to work in IE...
Groetjes, Pim
User avatar
peter.reisio
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm
Contact:

Re: Width of SELECT and INPUT not the same

Post by peter.reisio »

Mmm, but now you're using non-standard, proprietary code. :/
User avatar
BenoitRen
Posts: 5946
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Re: Width of SELECT and INPUT not the same

Post by BenoitRen »

What's this "16px/1" value? Is it even legit?

peter.reisio, you're abusing the apostrophe again. Here's a guide.
User avatar
Pim
Posts: 2215
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Re: Width of SELECT and INPUT not the same

Post by Pim »

BenoitRen wrote:What's this "16px/1" value? Is it even legit?

Yes.
Come on, don't question things that you can easily look up.
http://www.w3.org/TR/CSS2/fonts.html#font-shorthand
Groetjes, Pim
User avatar
peter.reisio
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm
Contact:

Re: Width of SELECT and INPUT not the same

Post by peter.reisio »

BenoitRen wrote:peter.reisio, you're abusing the apostrophe again. Here's a guide.

I'll let you know when I start taking grammatical cues from a site with so many syntax errors using a spec'd language such as HTML (having quite a leg up on English, which has no spec).
User avatar
BenoitRen
Posts: 5946
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Re: Width of SELECT and INPUT not the same

Post by BenoitRen »

@Pim: I had never seen that kind of notation before, so I wouldn't even have known where to look.

@peter.reisio: Now you're just being silly. It doesn't make the point any less true. English does have rules, even if it may not be a specification. If you really want to use apostrophes to pluralise, start typing in Dutch. In many instances you can use an apostrophe to pluralise in that language.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Width of SELECT and INPUT not the same

Post by jscher2000 »

BenoitRen wrote:@peter.reisio: Now you're just being silly. It doesn't make the point any less true. English does have rules, even if it may not be a specification.

The subject was discussed in a radio interview earlier this year or last year, I believe with some folks updating a famous dictionary. They said the trend is to allow use of apostrophes for plurals where it minimizes confusion. In other words, if it aids understanding to write input's in place of inputs, then evolving usage guidelines would permit it. Since I never again have to sit for the SAT, I personally will go with the more practical rule rather than the more pure.

But why is this relevant? Our mental wetware can handle the interchangeable use of multiple uses quite easily because we are accustomed to the English language changing every day. I suggest we focus this board on the problems of machine-interpreted languages, rather than human-interpreted ones. (Not that I have any control over what's posted here!)
User avatar
peter.reisio
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm
Contact:

Re: Width of SELECT and INPUT not the same

Post by peter.reisio »

I like to think of it as a lazier "input"s which is tedious both to type and read.
User avatar
BenoitRen
Posts: 5946
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Re: Width of SELECT and INPUT not the same

Post by BenoitRen »

Discussions naturally veer to off-topic territory. It's the nature of the beast, even on message boards. As long as the original query gets answered, I think it shouldn't matter much.

Most of the time the apostrophe does not limit confusion at all. People like to insert them at random pluralised words with no consistency. *sigh*
User avatar
peter.reisio
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm
Contact:

Re: Width of SELECT and INPUT not the same

Post by peter.reisio »

People not me. :p
Post Reply