Question

I’m working on a template with a designer and we see different things. In my browser on mac the input field are next to the labels but for the designer in his browser the input fields are under the labels.

I use eric meyer’s css reset so everything should be correct. Here’s a screenshot to illustrate what I mean (left is what it should be and on the right what it shouldn’t be)

Does anyone know how this could be fixed?

Answer 1

If field sizes are given in ems, then change them to px.

em is dependent on font-size, and font sizes aren’t pixel-perfect (different browsers round it differently, exact width may depend on font, especially if that gap between fields is a space).

Leave some room in the container (just make containing element few pixels wider than it has to be).

You may also try:

input {
 box-sizing: border-box; 
 -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}   

Which makes sizes of form elements a little bit more consistent.