geke hand
C S S  I M A G E  R E P L A C E

Jeffrey Zeldman recently discussed two alternatives to the FIR (Fahrner Image Replacement) technique.

Both alternate methods eliminate the inner SPAN tag by using CSS padding attributes instead of height and width properties.

I'd like to propose an alternate method which works perfectly in IE 6, Mozilla 1.4+ and Opera 6 and leverages font/text display properties to hide the text instead of hacking the box model or requiring a SPAN tag.

The CSS:

h1#repl { /* load image */ background-image: url("/images/jonathan_150.jpg"); background-repeat: no-repeat; /* hide text */ font-size: 0px; line-height: 310px; overflow: hidden; /* set height and width */ height: 150px; width: 138px; }

The line-height must be set to at least 2X the height of the image, plus an additional quantity for the smallest displayable font-size in Opera (which doesn't obey the font-size: 0px declaration).

It would seem that 3 or 4 times the image height should always be adequate.

The HTML:

<h1 id="repl">GEKE Image Replacement Technique</h1>

GEKE Image Replacement Technique

C S S  I M A G E  R E P L A C E

design by G E K E . N E T
best viewed in 1024x768 screen resolution using a standards compliant browser
logo based on a public domain drawing of a hand making the sign of the cross, no disrespect is intended
all other contents and code copyright © 2002-2005 jonathan cook

Valid HTML 4.01! Valid CSS!