CSS Positioning in IE8

On this site http://bit.ly/gkyS2p when you click on the Contact link in the menu there is the drop panel with a contact form. The works ‘Please type here’ appear too high up in IE8, they work well in Firefox, how can I fix it? Thanks

any help on this please?

You have a line-height of 13px in a 28px hight box. Apparently IE8 regarded the set line-height and couldn’t vertical centre the text in the input field, while some browsers disregarded the set line-height and vertically centred the text.

A solution could be to give a height that is the mimics a normal line-height, and for IE set the line-height to that value.

I have not tested this at all, but you could try change these rules and comment out the later IE rules:


#panel div.form form input.field {
	width: 170px;
	height: [COLOR="Red"]17px[/COLOR];  /* was 28px */
	padding: [COLOR="Red"]10px[/COLOR] 15px [COLOR="Red"]9px[/COLOR]; /* was 4px top bottom */
	margin-bottom: 15px;
	border: 1px solid #222419;
	background: url(images/field-bg.png) repeat-x;
	font: 13px GrandesignNeueSerifRegular, Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	line-height: [COLOR="Red"]1.3[/COLOR]; /* was 13px (13*1.3=[COLOR="Red"]17px[/COLOR]) */
	color: #a2a0a0;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

worked fine, thanks.