I would like to hear your suggestions & comments on the following way of styling forms.
My aim was to keep all elements in a row aligned to the text baseline and to create a vertical grid by controlling the row height. (The light blue line shows the alignment to the text baseline.) My test case shows one row with two labeled form fields (tested in FF and IE8): http://jsfiddle.net/cizmazia/KMVmw/77/ vertical-align: baseline - (default) aligns all elements vertically according to the text baseline border: 1px - triggers different rendering of the input & select elements when they have the same implicit height box-sizing: border-box; - allows to set the same width of the input & select elements As the input & select elements are rendered differently, I have not found a consistent way how to set the same explicit height of the input & select elements while keeping them aligned to the text baseline. Therefore I wrap them and set a sufficiently big height to the wrappers. I look forward to hearing your suggestions & comments. Michal Cizmazia ______________________________________________________________________ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
