Question

This little fiddle shows the problem I’m having.

The login form on the right looks fine under firefox (And even IE6) but when viewed in IE7+ or chrome/chromium there is a size difference.

This isn’t an actual size difference, but an illusion created by some of the inputs becoming positioned lower than the others, and the overflow on the div cutting them off.

I thought it could be some invisible value such as firefoxes dotted lines but setting outline: none doesn’t work either.

I’ve been debugging this all day and I don’t know why it’s not working.

Edit: Screenshot

Answer 1

Apparently vertical-align applies to the object relative to it’s parent, not the objects children relative to the object. Setting vertical-align on the inputs to top fixes the problem (But I still don’t know what caused it in the first place, odd)

http://jsfiddle.net/gnxRG/2/