1170900 - table width double than expected

Status: UNCONFIRMED

(Core :: Layout: Text and Fonts, defect)

Description

[tothphu]

Attachment: Screenshot from 2015-06-03 14:11:50.png

User Agent: Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:38.0) Gecko/20100101 Firefox/38.0
Build ID: 20150511104025

Steps to reproduce:

Firefox 38 running on Ubuntu 12.04 32bit with 14.04 kernel (supported by ubuntu). The issue is non reproducible under Windows7 or OSX.

Navigated to http://www.greencarcongress.com/




Actual results:

The left search bar overlaps with centre column text.


Expected results:

The table shouldn't be overlapping into the text.

Inspecting the element reveals that <table width="170"> while the tool says that element is 340 wide. I'm not sure why it happens.

Comment 1

[[:Aleksej]]

I see it on 2015-08-19-03-02-06-mozilla-central-firefox-43.0a1.ru.linux-x86_64.

The form is 170 wide, but its child span is 273 wide.

Comment 2

[Boris Zbarsky [:bzbarsky]]

> The form is 170 wide, but its child span is 273 wide.

If you can reproduce this.... can you look into why?  Is the textfield for the search there wider than 170px?  Something else?

Comment 3

[[:Aleksej]]

I can't understand why.

This is 273×13 (element is 269×23):
<input name="q" size="20" maxlength="255" value="" type="text">
Editing it does not change the width.

This is 54×17 (element is 40×15):
<input style="font-family: Verdana, Arial, sans-serif; font-size:x-small;" name="btnG" value="Search" type="submit">

Comment 4

[Boris Zbarsky [:bzbarsky]]

What happens if you do "font-family: Verdana, Arial, sans-serif" without the font-size setting?

What font is being selected when no font-family is specified?

Comment 5

[[:Aleksej]]

(In reply to Boris Zbarsky [:bz] from comment #4)
> What happens if you do "font-family: Verdana, Arial, sans-serif" without the
> font-size setting?

The text near radio buttons increases a little, the height of the green block decreases a little.

> What font is being selected when no font-family is specified?

When no font-family is specified,
- no font is listed for the input field,
- "Show all fonts…" lists fonts used as "Veranda", "Aerial", "DejaVu Serif" and "Liberation Serif".

Comment 6

[Boris Zbarsky [:bzbarsky]]

OK, but explicitly setting those fonts to be used doesn't give you the same width as the too-wide input?

Comment 7

[[:Aleksej]]

Replacing all attributes with “style="font-family: DejaVu Sans"” and disabling all other devtool style entries doesn't seem to change anything.
"Veranda" makes it 265px long,
"Liberation Serif" 240px (236x21).

I can make it 160×15 by changing my Xfce GTK font (DejaVu Sans Condensed) to size 10.  All the above values are with it being size 14.

Comment 8

[Boris Zbarsky [:bzbarsky]]

OK, what does getComputedStyle(el).fontFamily show when applied to that input field?  What width is an input styled with that font?

It basically sounds to me like some very wide font is being used for this input....

Comment 9

[[:Aleksej]]

I don't know how to do that today.

Computed shows, after I had deleted all the rules from the CSS devtool:
↓font-family     >Liberation Serif
this.style>Liberation Serif
(strike: input>-moz-use-system-font)   forms.css:54

Comment 10

[Boris Zbarsky [:bzbarsky]]

I guess my point is that someone who can reproduce this bug needs to do the following:

1)  Figure out which element it is that's too wide.
2)  Figure out _why_ it's too wide.

For finding the computed font-style, the simplest thing is to add an id to the element using the devtools if it doesn't have one already, and then to do:

  getComputedStyle(document.getElementById(theId)).fontFamily

in the console.

Comment 11

[[:Aleksej]]

(In reply to Boris Zbarsky [:bz] from comment #10)
> 1)  Figure out which element it is that's too wide.

The “input type="text"” should be that element, because if I delete it, the td becomes 170px wide.

>   getComputedStyle(document.getElementById(theId)).fontFamily

"DejaVu Sans"

Comment 12

[Boris Zbarsky [:bzbarsky]]

OK, so if you just do <input type="text" style="font-family: DejaVu Sans"> does it end up being the (buggy? unclear) width?

Comment 13

[[:Aleksej]]

Yes, and 269px.

Comment 14

[Boris Zbarsky [:bzbarsky]]

OK, so I guess the only real question is whether that's expected given the font metrics for that font...

Comment 15

[[:Aleksej]]

Is it OK that the table is inside a span which is inside a form?  Source view highlights td, /font and /td.

Comment 16

[Boris Zbarsky [:bzbarsky]]

Shouldn't matter.  Tables will just never shrink below their min-intrinsic size (at least not in auto layout mode), so if you have something wide inside that table the table will be wide too.