[FIXr]Small CSS line-height causes form elements to display oddly

VERIFIED FIXED in mozilla1.3alpha

Status

()

Core
Layout: Form Controls
P1
normal
VERIFIED FIXED
16 years ago
9 years ago

People

(Reporter: Aaron Kaluszka, Assigned: bz)

Tracking

({css2})

Trunk
mozilla1.3alpha
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 2 obsolete attachments)

(Reporter)

Description

16 years ago
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.
(Reporter)

Comment 1

16 years ago
Created attachment 35703 [details]
Testcase
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.
Assignee: karnaze → rods
Status: UNCONFIRMED → NEW
Component: Layout → HTML Form Controls
Ever confirmed: true
QA Contact: petersen → vladimire
Why is this a bug?
Whiteboard: INVALID? what's the bug?
Form elements shouldn't be affected by line-height in this way.  (Find the part
of CSS2 that says that they should be. :-)
Find the part that says they are special cased. :-)
Find the general case that they're an example of. :-)
Does 'inline-block' count? :-)
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.
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.
(Reporter)

Comment 10

16 years ago
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.
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).
Whiteboard: INVALID? what's the bug?

Updated

16 years ago
Status: NEW → ASSIGNED
Target Milestone: --- → mozilla1.0

Comment 12

16 years ago
I think this is a dupe of bug 79999...
(Reporter)

Comment 13

16 years ago
Sort of.. but this seems to cover it better

Comment 14

16 years ago

*** This bug has been marked as a duplicate of 79999 ***
Status: ASSIGNED → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → DUPLICATE

Comment 15

16 years ago
verifying duplicate
Status: RESOLVED → VERIFIED
(Reporter)

Comment 16

16 years ago
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.
Status: VERIFIED → REOPENED
Resolution: DUPLICATE → ---
(Reporter)

Updated

16 years ago
Keywords: css2, mozilla0.9.2, nsbeta1
(Reporter)

Comment 17

16 years ago
fix for bug 82626 was backed out; thus, the problem returns

Updated

16 years ago
Blocks: 104166

Comment 18

16 years ago
Moving to Future
Target Milestone: mozilla1.0 → Future
(Reporter)

Updated

16 years ago
Keywords: mozilla0.9.8
(Reporter)

Comment 19

16 years ago
Hmm textarea seems to work properly now, but not the other form elements.
(Reporter)

Updated

16 years ago
Keywords: mozilla0.9.8 → mozilla1.0
(Reporter)

Comment 20

16 years ago
The effects are even worse using XBLFC: weird scrollbars and stuff.

Comment 21

15 years ago
Reconfirmed using FizzillaCFM/2002071208. Setting Platform=All.
Hardware: PC → All
(Assignee)

Updated

15 years ago
Blocks: 167236
(Assignee)

Comment 22

15 years ago
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)...
(Assignee)

Updated

15 years ago
Blocks: 45745
(Assignee)

Updated

15 years ago
Blocks: 90884
(Assignee)

Updated

15 years ago
Blocks: 155483
Agreed, of course.
(Assignee)

Comment 24

15 years ago
taking.
Assignee: rods → bzbarsky
Status: REOPENED → NEW
(Assignee)

Comment 25

15 years ago
Created attachment 104278 [details]
more comprehensive testcase
Attachment #35703 - Attachment is obsolete: true
(Assignee)

Comment 26

15 years ago
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.
(Assignee)

Updated

15 years ago
Blocks: 136971
(Assignee)

Updated

15 years ago
Priority: -- → P1
Summary: Small CSS line-height causes form elements to display oddly → [FIX]Small CSS line-height causes form elements to display oddly
Target Milestone: Future → mozilla1.3alpha
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"
Attachment #104279 - Flags: review+
(Assignee)

Comment 28

15 years ago
Created attachment 104577 [details] [diff] [review]
same without height: auto !important
Attachment #104279 - Attachment is obsolete: true
Comment on attachment 104577 [details] [diff] [review]
same without height: auto !important

sr=dbaron (and transferring r=jkeiser)
Attachment #104577 - Flags: superreview+
Attachment #104577 - Flags: review+
(Assignee)

Updated

15 years ago
Summary: [FIX]Small CSS line-height causes form elements to display oddly → [FIXr]Small CSS line-height causes form elements to display oddly
(Assignee)

Comment 30

15 years ago
fixed for 1.3a
Status: NEW → RESOLVED
Last Resolved: 16 years ago15 years ago
Resolution: --- → FIXED
(Assignee)

Updated

15 years ago
Blocks: 82626

Comment 31

15 years ago
verifying build 2003-01-17-04-trunk
Status: RESOLVED → VERIFIED
(Assignee)

Updated

14 years ago
Blocks: 111672
(Assignee)

Updated

14 years ago
Blocks: 117514

Updated

9 years ago
Duplicate of this bug: 349259
(Assignee)

Updated

9 years ago
Depends on: 349259
You need to log in before you can comment on or make changes to this bug.