3
\$\begingroup\$

Here's what it looks like on Win7, Chrome 45.0.2454.85, 1304x660 viewport:

enter image description here

Similar issue in Firefox 40 and IE 11, yet it underflows instead of overflowing.

Fix: remove that useless one-cell <table> from markup and set

width: 100%;
box-sizing: border-box;

to your <input>. Thanks.

\$\endgroup\$
6
  • \$\begingroup\$ Aside, note that the width on the input is set: it's 30, which means 30em. Do you perhaps have your OS or browser's font size increased? \$\endgroup\$
    – SevenSidedDie
    Sep 23, 2015 at 23:51
  • \$\begingroup\$ @SevenSidedDie Well, setting size="27" fixed the issue. The reason we see this difference is that under no circumstances size attribute should be used to set the width. \$\endgroup\$
    – polkovnikov.ph
    Sep 24, 2015 at 0:09
  • \$\begingroup\$ No, if we're using the same browser to render the same code, a point of design philosophy is unlikely to be causing an difference in output. I don't think the browser pays attention to the design philosophy of its user. Likely the source is in some actual, quantifiable difference in the setups of the two environments. \$\endgroup\$
    – SevenSidedDie
    Sep 24, 2015 at 0:12
  • \$\begingroup\$ i.imgur.com/QsTHgvr.png I can confirm it actually looks like this on an un-zoomed-in chrome window. Can we clean up some of the chatty comments? (this is win 10, chrome 45.something, 1920*1080) \$\endgroup\$
    – Tritium21
    Sep 25, 2015 at 5:10
  • \$\begingroup\$ @SevenSidedDie It's been 1.5 years, and this bug is still present. \$\endgroup\$
    – polkovnikov.ph
    Mar 31, 2017 at 7:58
  • \$\begingroup\$ I'm not development staff. \$\endgroup\$
    – SevenSidedDie
    Mar 31, 2017 at 14:52

1 Answer 1

Reset to default
1
\$\begingroup\$

Yeah, this is yet another case of input field / textarea widths measured in ems being wildly inconsistent across different browser, OS and installed font combinations.

I've added the CSS fix suggested by polkovnikov.ph into the next version of my SOUP user script. (It's already in the development branch, and yes, you've been credited.) Since I can't actually get rid of the useless <table> with CSS, I just tweaked the selector to also apply the same styles to the table too:

.new-login-form .new-login-right input,
.new-login-form .new-login-right table {
    width: 100%;
    box-sizing: border-box;
}
\$\endgroup\$
3
  • \$\begingroup\$ Shouldn't it be something like .new-login-form > .new-login-right > input? Juxtaposition operator A B in selectors means "all descendants of A that are B", and it's not as performant as A > B i.e. "all children of A that are B". \$\endgroup\$
    – polkovnikov.ph
    Oct 3, 2015 at 19:30
  • \$\begingroup\$ I've never heard of SOUP, but I'll certainly get one now. \$\endgroup\$
    – polkovnikov.ph
    Oct 3, 2015 at 19:31
  • \$\begingroup\$ You've got a point, but here there are a whole bunch of <div> and <tr> and <td> and other tags there in between, so using direct child selectors would make the selector really messy (not to mention fragile, if SE ever removes that useless table or changes the HTML in some other minor way). \$\endgroup\$
    – Ilmari Karonen
    Oct 3, 2015 at 19:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .