Support: This technique is supported by IE 5.+, Firefox (and the rest of the Mozilla family) and Safari 3.0*. It is not supported by Opera** (any version), Netscape 6.2 and earlier or Camino.

Warning: I haven’t thought this all the way through, so if you see any problems with this technique other than the above support caveats, then please let me know 🙂 I’m really just writing this up because I just thought of doing it, I tried it and it worked…

The issue and solution: Occasionally I need to use an image, with text, for the background of an input button. It’s rare, but occasionally it needs to happen. Thing about that is, I still want to have a regular value in there so that screen readers and people surfing without CSS at all can still figure out what the input says. I’ve usually encountered this issue on on fast-paced, get-em-out-the-door projects, so I’ve never had time to actually sit down and think about a solution. I’ve never actually come up with a solution that I liked for this. Negative text indent doesn’t work, so I’ve always done random hacks to get it to work correctly. Recently I achieved it by shrinking it way down and coloring it the same size as the background.

Painful.

Today, for whatever reason, I took it one step further and set font-size:0;, hit F12 and saw, *GASP*, it worked. Browsercam verifies that it works for the above named browsers.

Here’s a sample:

And here’s the code for the above #go button.

#go {
	background: url(images/go.jpg);
	height: 25px;
	width: 41px;
	font-size: 0px;
        border:0;
}

This is one of those things that seems so obvious in hindsight. I just never thought to do it before today. hrm.

*Safari 1.2 and 2.0 ignore both the font-size AND the background image.
**Opera displays something like 6pt type.