PNG’s Image Links and IE6 Fixes

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!


Be the first to write a comment about PNG’s Image Links and IE6 Fixes…

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>