Positioning form's inputs with em unit.

Question

I was looking for way to set position for inputs other than using tables. I googled this: Applying CSS to forms and I've made a test site: korran.ovh.org/test/test.html Text-type inputs looks good, but submit is moved a little to the left. Interesting thing is that if I set font-size: 10pt it looks perfect. But with default 12pt it's moved. So what's the problem here?

PS. I don't want to change positioning to px-based or with % ;)

Answer 1

Ems are calculated based on the font-size of the parent element. Bumping up your font size from 10 to 12 is adjusting the value of the em, causing your submit button to move.

Try setting a different font-size on the parent element of the submit button to offset any changes that may be occurring in the cascade. Firebug is very helpful for showing both ems and what px value they are calculating to.