Placeholder text in my text fields is incorrectly matched in chrome

Question

I have a problem in Google Chrome where the placeholder text is too high on my website http://www.myinvestmentdecision.com.au

Click "Feedback" and you will see that the text in the placeholder sits at a high level. I have a placeholder script, but it disconnects when it realizes that chrome has placeholder support.

Just to read this point here: 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

Answer 2

I think your line is: 28 from here: (form.css)

 .form { font-family: arial, sans-serif; } .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; } 

Causes a problem. Remember that this ad refers to the content of the tag, as well as to the tag itself. This can get you when it comes to forms.

Answer 3

Not sure if this is the “right” way to do this, but adding 5px fill in the input box will center the placeholder for the email field.

Just add this to your CSS wherever applicable to this email field:

 padding: 5px;