CODEWITHSUNDEEP
htmlcss
J V
J V

Reputation: 11936

Inputs next to eachother have variable positions

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

enter image description here

Upvotes: 1

Views: 111

Answers (2)

J V
J V

Reputation: 11936

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/

Upvotes: 0

Shawn Taylor
Shawn Taylor

Reputation: 3969

Replace height with line-height.

http://jsfiddle.net/gnxRG/1/

Upvotes: 1

Related Questions