Form widgets all have different heights and baselines

RESOLVED FIXED in Future

Status

()

RESOLVED FIXED
18 years ago
16 years ago

People

(Reporter: jwbaker, Assigned: rods)

Tracking

({testcase})

Trunk
Future
x86
All
testcase
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(URL)

Attachments

(5 attachments)

(Reporter)

Description

18 years ago
Form widgets look aweful next to each other.  If you line up an <input
type="text"> and a <button> next to one another, the button will be higher up on
the page and also taller than the <input>, even if they are styled to have the
same typeface.

You can see this everywhere on the web.  Forms look like ass in Mozilla, and I
think it is just something that all long-time users have resigned themselves to.
 I'm attaching an HTML file that would be a great place to start: designers just
want to have widgets that line up.
so... Jeffrey Baker, are you attaching that file?
(Reporter)

Comment 2

18 years ago
Created attachment 26269 [details]
HTML file that demonstrates mismatched widgets
(Reporter)

Comment 3

18 years ago
Created attachment 26270 [details]
Screenshot

Updated

18 years ago
Depends on: 37856
(Assignee)

Comment 4

18 years ago
This should be just a forms.css fix.
Status: NEW → ASSIGNED
Target Milestone: --- → mozilla0.9.1

Comment 5

18 years ago
QA Contact Update
QA Contact: bsharma → vladimire
(Assignee)

Updated

18 years ago
Target Milestone: mozilla0.9.1 → mozilla1.0

Comment 6

18 years ago
I am going to create a testcase in strict mode and one in quirks mode that has
more than just text input and button.  You can see that the problems pretty good
with height & line-height & baseline.

HTML Form controls needs a little polish.
Keywords: testcase

Comment 7

18 years ago
Created attachment 31899 [details]
strict mode testcase

Comment 8

18 years ago
Created attachment 31900 [details]
quirks mode testcase

Comment 9

18 years ago
This is indeed a major problem even with standard text (outside of inputs)
baseline. The baseline of the text inside an INPUT element should be the same as
the baseline of the surrounding text. Presently forms look absolutely ugly. 

Apparently, the only way to have properly aligned text and INPUT elements is to
enclose everything in tables. But this is a Bad Thing, as it prevents reflowing
based on the current window size.

This was scheduled (I remember) to be fixed in 0.9, but apparently it was not.

A linked problem is that there is some problem with the baseline of True Type
fonts. The INPUT elements containing Courier New are incredibly high, and the
fact that the elements are not properly aligned with text makes things even worse.

(I'm using Mozilla under Linux).

The following code demonstrates this or a related problem.  Table cells with
valign="baseline" align text to the bottom of input widget itself rather than
the baseline of the text within the input widget.

<html>
<body>
<form>
<table>
  <tr>
    <td align="right"><u>Not aligned to baseline:</u></td>
    <td><input value="foo"></td>
  </tr>
  <tr>
    <td valign="baseline" align="right"><u>Aligned to baseline:</u></td>
    <td valign="baseline"><input value="foo"></td>
  </tr>
</table>
</form>
</body>
</html>
Created attachment 43708 [details]
testcase: text/input in table cells
(Assignee)

Comment 12

17 years ago
Moving to Future
Target Milestone: mozilla1.0 → Future

Updated

16 years ago
QA Contact: vladimire → tpreston
Fixed by bug 167236
Status: ASSIGNED → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → FIXED
*** Bug 180074 has been marked as a duplicate of this bug. ***
You need to log in before you can comment on or make changes to this bug.