# Post as a guest: CSS bug

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

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.

• 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? – SevenSidedDie Sep 23 '15 at 23:51
• @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. – polkovnikov.ph Sep 24 '15 at 0:09
• 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. – SevenSidedDie Sep 24 '15 at 0:12
• 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) – Tritium21 Sep 25 '15 at 5:10
• @SevenSidedDie It's been 1.5 years, and this bug is still present. – polkovnikov.ph Mar 31 '17 at 7:58
• I'm not development staff. – SevenSidedDie Mar 31 '17 at 14:52

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,

• 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". – polkovnikov.ph Oct 3 '15 at 19:30
• 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). – Ilmari Karonen Oct 3 '15 at 19:33