As some of you may be aware PNG’s are a bit of a pain when it comes to supporting good old IE6. How I long for the day I can either stop supporting IE6 or when someone develops a js fix so that I can use background images with positions and repeats among other things. (PNGFix is currently working on a beta js to support the above and is well worth looking into.)
However a particular annoyance is what happens when you use a transparent png as an image link! What you will experience is a link that is only active when you manage to precisely position your mouse over the top of a letter or part of the non transparent image. Any area that is transparent even though your link is set to display:block with widths and heights is ignored.
However all is not lost. There is a solution…
Simply save your pngs with a 1% transparent background. This is not visible to the naked eye but tricks the browser into displaying the transparent area as a block. Clever hey!
