Clint McKoy

I’ve come across this issue a few times lately, where the value for a text input will not disappear in IE7 (Internet Explorer 7) by using text-indent alone. This becomes an issue when trying to implement a custom submit button that consists of a background image only.

The solution: Give the input a very high line-height and set the overflow to “hidden”. 

input {
	line-height: 500px;
	overflow:hidden; 
}

But unfortunately, this method does not work on FF (Firefox). You’ll still need to use the text-indent method as well. So, you’re finished product will look something like this:

input {
	text-indent: -9999px;
	line-height: 500px;
	overflow:hidden; 
}

I finally came up with the correct styling formula for vertically aligning text across all modern browsers, including Safari, Chrome, FF, and IE (6, 7, 8, & 9.) The secret is to set the height and line-height to the same value. So, your CSS would look something like this:

input {
	height: 30px;
	line-height: 30px;
}

Update: ‘line-height’ is only needed for IE7 and IE8. In some instances, you’ll only need to apply ‘line-height’ to those particular browsers.

I’ve had a few instances lately where I needed to target Firefox only in my CSS stylesheet. This is the best method I’ve found:

/* Target Firefox Only */
@-moz-document url-prefix() {
    #selector {
	margin-top: 100px;
	}

}