Last Comment Bug 82265 - [FIXr]Small CSS line-height causes form elements to display oddly
: [FIXr]Small CSS line-height causes form elements to display oddly
Status: VERIFIED FIXED
: css2
Product: Core
Classification: Components
Component: Layout: Form Controls (show other bugs)
: Trunk
: All All
: P1 normal (vote)
: mozilla1.3alpha
Assigned To: Boris Zbarsky [:bz] (still a bit busy)
: Vladimir Ermakov
: Jet Villegas (:jet)
Mentors:
Depends on: 349259
Blocks: 45745 82626 90884 104166 111672 117514 136971 155483 167236
  Show dependency treegraph
 
Reported: 2001-05-22 17:15 PDT by Aaron Kaluszka
Modified: 2009-03-04 22:38 PST (History)
7 users (show)
See Also:
Crash Signature:
(edit)
QA Whiteboard:
Iteration: ---
Points: ---
Has Regression Range: ---
Has STR: ---


Attachments
Testcase (440 bytes, text/html)
2001-05-22 17:18 PDT, Aaron Kaluszka
no flags Details
more comprehensive testcase (1.93 KB, text/html)
2002-10-26 12:55 PDT, Boris Zbarsky [:bz] (still a bit busy)
no flags Details
disable line-height on all form controls (3.10 KB, patch)
2002-10-26 13:05 PDT, Boris Zbarsky [:bz] (still a bit busy)
john: review+
Details | Diff | Splinter Review
same without height: auto !important (3.07 KB, patch)
2002-10-29 16:35 PST, Boris Zbarsky [:bz] (still a bit busy)
dbaron: review+
dbaron: superreview+
Details | Diff | Splinter Review

Description Aaron Kaluszka 2001-05-22 17:15:55 PDT
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:0.9+) Gecko/20010522

See attached document.  Problem is especially apparent on select box.  Can be
worked-around with: 
input{line-height:115%;}
select{line-height:115%;}
textarea{line-height:115%;}
May be by design.
Comment 1 Aaron Kaluszka 2001-05-22 17:18:40 PDT
Created attachment 35703 [details]
Testcase
Comment 2 David Baron :dbaron: ⌚️UTC-10 2001-05-22 17:31:10 PDT
Perhaps the way to fix this is by rules in ua.css?  Although really it might be
nice if the form controls used something less general than the block & inline
layout code.
Comment 3 Hixie (not reading bugmail) 2001-05-23 13:33:07 PDT
Why is this a bug?
Comment 4 David Baron :dbaron: ⌚️UTC-10 2001-05-23 13:39:06 PDT
Form elements shouldn't be affected by line-height in this way.  (Find the part
of CSS2 that says that they should be. :-)
Comment 5 Hixie (not reading bugmail) 2001-05-23 14:34:00 PDT
Find the part that says they are special cased. :-)
Comment 6 David Baron :dbaron: ⌚️UTC-10 2001-05-23 15:15:47 PDT
Find the general case that they're an example of. :-)
Comment 7 Hixie (not reading bugmail) 2001-05-23 15:20:26 PDT
Does 'inline-block' count? :-)
Comment 8 David Baron :dbaron: ⌚️UTC-10 2001-05-23 15:34:00 PDT
When you can point to a specification that describes how its contents can be
rendered and can describe the rendering of form controls in terms of it.
Comment 9 Hixie (not reading bugmail) 2001-05-23 15:43:29 PDT
Well, the form controls can be described in terms of inline-block and the XUL-
style box model, as demonstrated by, er, XUL. That's not normative though,
granted. Time for me to work some more on my UI draft...

However, just because the spec doesn't say that form controls shouldn't be
affected by line-height doesn't imply the opposite. Should 'background' affect
form controls? Many web authors certainly want it to.
Comment 10 Aaron Kaluszka 2001-05-23 16:43:29 PDT
The issue I was focusing on wasn't as general as should the form elements even 
take that attribute.  What I was noting was that when it does take that 
attribute, the text is offset, but the form elements themselves are not.  It 
gets even weirder with the more complex form elements, select and textarea.  
The testcase shows them all.  In particular, look at how the select options act 
when you mouse over them.
Comment 11 Hixie (not reading bugmail) 2001-05-23 18:48:03 PDT
Depending on how exactly we define the form controls, what we do now might
actually be correct. It's suboptimal though, IMHO, yes.

This will get fixed once we switch to truly CSS-based form controls (the XBL
form controls).
Comment 12 doctor__j 2001-05-30 10:07:39 PDT
I think this is a dupe of bug 79999...
Comment 13 Aaron Kaluszka 2001-05-30 10:20:08 PDT
Sort of.. but this seems to cover it better
Comment 14 rods (gone) 2001-05-30 12:41:17 PDT

*** This bug has been marked as a duplicate of 79999 ***
Comment 15 Vladimir Ermakov 2001-05-31 12:05:38 PDT
verifying duplicate
Comment 16 Aaron Kaluszka 2001-06-09 09:44:16 PDT
The dropdown was fixed from bug 82626, but there are still other issues.  Look
at the test case again.  In addition, the fix might have broken something else..
to see what I mean, select all of the items in the Bugzilla query.  there are
now spaces between random selected lines.
Comment 17 Aaron Kaluszka 2001-06-12 07:33:38 PDT
fix for bug 82626 was backed out; thus, the problem returns
Comment 18 rods (gone) 2001-10-29 12:34:18 PST
Moving to Future
Comment 19 Aaron Kaluszka 2002-01-27 12:06:56 PST
Hmm textarea seems to work properly now, but not the other form elements.
Comment 20 Aaron Kaluszka 2002-04-26 14:39:06 PDT
The effects are even worse using XBLFC: weird scrollbars and stuff.
Comment 21 Greg K. 2002-07-14 10:47:03 PDT
Reconfirmed using FizzillaCFM/2002071208. Setting Platform=All.
Comment 22 Boris Zbarsky [:bz] (still a bit busy) 2002-10-25 18:23:24 PDT
OK.  I think the fact that there is a block inside the form control is
completely and utterly an implementation detail.  At the very least we should
put line-height:normal on all controls in forms.css; I would like to make that
!important, myself.  Fwiw, hyatt agrees with me.  So unless there's some
_really_ good reason we should not do it (like "that violates the spec" good;
not doing it is a compat nightmare that we should not be causing)...
Comment 23 David Baron :dbaron: ⌚️UTC-10 2002-10-26 12:35:49 PDT
Agreed, of course.
Comment 24 Boris Zbarsky [:bz] (still a bit busy) 2002-10-26 12:40:12 PDT
taking.
Comment 25 Boris Zbarsky [:bz] (still a bit busy) 2002-10-26 12:55:12 PDT
Created attachment 104278 [details]
more comprehensive testcase
Comment 26 Boris Zbarsky [:bz] (still a bit busy) 2002-10-26 13:05:17 PDT
Created attachment 104279 [details] [diff] [review]
disable line-height on all form controls

The only one of these which gives me any pause at all is textarea... For the
one, perhaps the setting should not be !important.  For all the rest, it should
definitely be !important.
Comment 27 John Keiser (jkeiser) 2002-10-29 16:22:41 PST
Comment on attachment 104279 [details] [diff] [review]
disable line-height on all form controls

r=jkeiser if you remove height: auto !important on optgroup ... maybe we need
to talk about disabling a bunch of stuff at once with a comment "disabling to
keep people from using this crap on their web pages"
Comment 28 Boris Zbarsky [:bz] (still a bit busy) 2002-10-29 16:35:34 PST
Created attachment 104577 [details] [diff] [review]
same without height: auto !important
Comment 29 David Baron :dbaron: ⌚️UTC-10 2002-10-29 18:24:13 PST
Comment on attachment 104577 [details] [diff] [review]
same without height: auto !important

sr=dbaron (and transferring r=jkeiser)
Comment 30 Boris Zbarsky [:bz] (still a bit busy) 2002-11-05 18:22:16 PST
fixed for 1.3a
Comment 31 Vladimir Ermakov 2003-02-12 11:35:43 PST
verifying build 2003-01-17-04-trunk
Comment 32 Daniel.S 2009-02-07 07:45:42 PST
*** Bug 349259 has been marked as a duplicate of this bug. ***

Note You need to log in before you can comment on or make changes to this bug.