263299 - Mozilla does not honor css rules. Especially bad in input fields.

Status: RESOLVED INVALID

(Core :: Layout: Form Controls, defect)

Description

[Nigel Hong]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; rv:1.7.3) Gecko/20040914 Firefox/0.10.1
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; rv:1.7.3) Gecko/20040914 Firefox/0.10.1

In the test page's input field most of the text is hidden below the bottom line.
Although according to the rules there should be enough space inside to fit the
whole 11px text. If I left-click inside the input area and move mouse down-up
then I can scroll the text. The effect varies with different fonts. With Tahoma
on linux it is especially bad.


Reproducible: Always
Steps to Reproduce:
1. write some text in the input field
2. left-click inside the input field with a mouse and hold the button down
3. move mouse down-up

Actual Results:  
Most of the text is hidden below the bottom line.
Resultingly text can be scrolled in an input field.

Expected Results:  

Expected behaviour: text should fit inside the input field nicely. This will
automatically eliminate the srcolling effect.

Comment 1

[Peter van der Woude [:Peter6]]

it beats the font being squeezed by bad css
why should FF ignore wrong CSS design ?
W3C http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.4
doesn't say anything about it either.

WONT ?

Comment 2

[Peter van der Woude [:Peter6]]

other browsers:
Opera squeezes (resizes) the text to fit inside the margins of the input
IE ignores the margin-bottom to fit the text in anyway

Comment 3

[Bill Mason]

WFM FF 1.0PR and 20041006 trunk build, PC/WinXP.  There's the tiniest scroll
effect, but no hidden text.

Comment 4

[Nigel Hong]

I just tried it with Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8a5)
Gecko/20041009 Firefox/0.9.1+

The text is not all hidden but some 2/3 of the text is hidden with this
particular font. The magnitude of the effect varies on different fonts. Despite
the font height being the same in pixels (I don't know if this is normal
behavior but even if it isn't it's another issue).

#1, does it mean then that there is no way to have a custom height input box
looking good in Firefox?

Comment 5

[Boris Zbarsky [:bzbarsky]]

The page sets a 20px height and 6px of total top/bottom padding.  The input also
has 2px top border and 2px bottom border.  Since the input uses border-box
sizing, that leaves 10px for the text.  The font size is set at 11px, so one
would typically expect text to be cut off.

I'm not sure why you feel the need to set the input height instead of just
letting it size to the height it needs given your font-size and padding
settings.  But you're just not setting a big enough height is all.  Then again,
I'm also not sure why you're changing the default paddings (which are already
selected to give optimal presentation and default to 1px).  If you didn't do
that, things would still fit.

You could always set the "-moz-box-sizing" property to "content-box", but then
the total height of the input in this testcase, from bottom border edge to top
border edge, would become 30px.

Note that IE does not consider the border it paints on the inputs as "part of
the input", which is why in IE you have 14px for the text, not 10px.  So this
CSS "works" with IE (as long as you don't try to display fonts that have
characters that go too far above or below the baseline...)

Marking invalid, since we're doing exactly what we should be doing given the CSS
on that page.