Inline SELECT elements misaligned in Discussion Settings

[jeremyfelt]

The vertical-align: top; style for .wp-admin select elements in the new admin style causes some weird alignment issues when a single line in the admin has multiple types of input.

This seems most obvious in the Discussion Settings page:

Comparing to 3.7.1 shows that we had vertical-align: middle; previously, which resolves the issue on this particular page. I'm not sure what else this may affect throughout core though.

Patch attached. Everything in Chrome 31, OSX.

[iammattthomas]

In 26384:

Make sure that select elements vertically align properly with other text. Fixes #26136, props jeremyfelt.

[johnjamesjacoby]

Having any vertical alignment set triggers alignment issues in different browsers.

Attaching a screenshot to show what it looks like currently in current versions of Safari and Chrome. (You'll notice a 3px difference between the first label and the second label.)

[johnjamesjacoby]

​http://local.wordpress.dev/wp-admin/options-discussion.php

[johnjamesjacoby]

I have only tested in OS X, but removing the vertical-alignment completely helps (though it doesn't completely fix the problem either.) The problem is the height differences between input (checkboxes) and select drop-downs, namely that the selects are set to 28px and checkboxes are set to 16px.

Since we're already reserving height and width settings for checkboxes to 16px to handle the painting of the checkbox itself, setting the height to a matching 28px isn't an option.

Removing the vertical-alignment and height settings for select elements should do the trick, though it needs testing in other operating systems.

[SergeyBiryukov]

Replying to johnjamesjacoby:

Having any vertical alignment set triggers alignment issues in different browsers.

This ticket was closed on a completed milestone, please open a new one.