MozillaZine

Width of SELECT and INPUT not the same

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Pim

User avatar
 
Posts: 2116
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted October 26th, 2009, 6:01 am

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

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted October 26th, 2009, 7:36 am

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

Pim

User avatar
 
Posts: 2116
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted October 26th, 2009, 7:57 am

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

Pim

User avatar
 
Posts: 2116
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted October 26th, 2009, 9:10 am

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

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted October 26th, 2009, 9:16 am

Mmm, but now you're using non-standard, proprietary code. :/

BenoitRen

User avatar
 
Posts: 5921
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Post Posted October 27th, 2009, 4:39 am

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

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

Pim

User avatar
 
Posts: 2116
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted October 27th, 2009, 5:01 am

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

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted October 27th, 2009, 8:51 am

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

BenoitRen

User avatar
 
Posts: 5921
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Post Posted October 29th, 2009, 11:46 am

@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.

jscher2000

User avatar
 
Posts: 9558
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted October 29th, 2009, 1:43 pm

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!)

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted October 29th, 2009, 3:30 pm

I like to think of it as a lazier "input"s which is tedious both to type and read.

BenoitRen

User avatar
 
Posts: 5921
Joined: April 11th, 2004, 10:20 am
Location: Belgium

Post Posted October 30th, 2009, 9:07 am

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*

peter.reisio

User avatar
 
Posts: 3166
Joined: March 3rd, 2004, 6:57 pm

Post Posted October 30th, 2009, 1:11 pm

People not me. :p

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest