I’d like a search box with a button immediately butted up next to it, with both elements the same height… But I can’t get them to be the same height across all browsers! It seems like a simple task, but it just won’t work! This is how I’d like it to work, and I’ve tried all sort of different permutations…
The simple fact is that the inputs and submits are not the same size by default anyway. So adding padding and font-size is never going to make them equal for all browsers as they all have different methods of rendering these form elements. It’s only when you fix the height that you can get some sort of accuracy although this can be risky if fonts are to be scaled.
Also the input button uses the normal box model but submit buttons use the alternative box model where padding and borders are included in the width and height of the element and not added to it.
The inputs are best floated to fix whitespace and margin gaps that will stop them butting up and aligning correctly (where pixel position isn’t required then I wouldn’t float them as I usually use display:inline-block for the label and having a float in the mix messes up the display and makes it harder to control).
I did want to avoid setting the heights in pixels to allow for the font size to change…
Although you could make then appear ok for one browser they would not be the same in other browsers because of the reason I mentioned above ad setting a height is the only sure way.
You could set em height so it scales with text size or you can remove some of the padding so the text can expand without over-running the inputs.
This example will allow scaling from 10px - to about 22px before it starts to overlap.
Or you could use ems for the height but are likely to get rounding errors in various browsers thus breaking the display more than the pixel version would.
Form elements are always awkward and inconsistent. Sometimes its better to style the parent of the inputs (e.g. a parent span) and then make the input itself transparent with no borders or margins.
Unfortunately form elements are tied closely to each individual browser and formed with proprietary properties of which not many are available for styling which is why the best advice is usually to do nothing.
Submits and select boxes both use the alternative box model and so you have to account for this when designing although of course the select is virtually unstylable in IE.
However, generally I dislike fiddling with proprietary code for minor differences. Webkit does have its own rules and indeed you can change elements completely in webkit and moz.
I also find that mac and PC are generally 1px out in text alignment of controls which usually precludes most pixel perfect fixes anyway.
A lot of these proprietary form behaviours are for things like the hover outlines on submit buttons and the depressed effect when clicked. Once you start removing things then you lose all these visual clues.
I’ve also found that it’s often impossible to alter just one aspect of the appearance of something like a button. If you want to change one element of its appearance, you are now responsible for addressing all aspects of its appearance. In other words, you usually can’t tell the browser, “Use your defaults for this, except for X.”
