REGRESSION: Margin-top:18px is pushing down the multiple select list box outside the div.

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Anantha Keesara]

I .Steps:
-----------
1. Go to: http://callejero.terra.es/rutas_interurbanas.htm

II. Issue:
-----------------
Notice the alignment of the "Configuracion  de la ruta" button- it is overlapping the fields above it.

III. Other browsers:
-------------------
IE, FF, Opera: doesn't have this issue

[Anantha Keesara]

Created attachment 16357 [details]
Margin-top:18px is pushing down the multiple select list box outside the div.

[Gavin Sherlock]

This does not happen in release Safari on the Mac, but does happen in the nightly (25699), so is a regression.

This just comes down to the fact that the WebKit listbox is 2px wider than the Gecko one. (In the test case, this makes it not fit on the same line with the non-breaking space and therefore it is place one line below and thus overflows the red box).

What it really comes down to is that html4.css gives listboxes a -webkit-box-sizing value of 'initial', which is 'content-box'. In Firefox they behave like they have box-sizing: border-box.

WinIE also treats listboxes as box-sizing: border-box, although you can't change the default border. Both in quirks mode and in strict mode.

Created attachment 16404 [details]
Change listboxes to border-box sizing

[Dave Hyatt]

Comment on attachment 16404 [details]
Change listboxes to border-box sizing

r=me

[Mark Rowe (bdash)]

Landed in r25788.

[Mark Rowe (bdash)]

<rdar://problem/5510720>