The placeholder text in my text boxes is mis aligned in chrome

Question

I've got a problem in Google chrome where the placeholder text sits too high on my website http://www.myinvestmentdecision.com.au

Click "Feedback" and you'll see the text in the placeholder sits to high. I've got a placeholder script, but it turns off when it realises that chrome has support for placeholder.

Just to proove that point here's a jsfiddle of the form itself: http://jsfiddle.net/RAANa/

Must be a CSS thing. Any ideas?

Answer 1

Remove line-height:28px from your css below.

.form input[type="text"], .form input.text, .form .calculate_box .calc {
background: transparent url(../images/input-background.png) repeat-x left top;
border: 1px solid #A1A1A1;
margin-left: -1px;
height: 28px;
line-height: 28px;
display: block;
width: 284px;
}

See attached screenshot with line-height removed