Internet Explorer Logo

PNG IE 6 & 7 Background and Clickable Link Fix


Alright! I'm back again with this IE stuff. Check THIS out. Having a background PNG is REALLY COOL. Internet Explorer 6 & 7 has some issues with them (nothing unusual there). However, once you get it up things are no longer clickable. Well, all that is over. I finally figured it out and it's pretty damn cool!


Share

Here is the CSS. In order to make things clickable inside of the PNG, you need to position everything inside of it "relative". Then for some strange reason, in IE it becomes "clickable".

.png_background{
    background: url(/ad/images/player-header-swoosh.png) no-repeat;/* For other browsers */
    *background-image:none; /* turn off the standard css background for IE */
    *filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/ad/images/player-header-swoosh.png', sizingMethod='crop'); /* IE 6 and 7 method.*/
    background-color:red;
    display:block;
    width:550px;
    height:89px;

}
.png_background a{
     position:relative; /* to make the links clickable*/

    float:left;
    margin:30px 0px 0px 225px;
    font-weight:bold;
}

** Again this works in ALL BROWSERS including IE6. If you want it to see it in action, just GO TO THIS SITE using different browsers. Cheers!

Here is an example with RED coming through from the background of the div. Cool huh!?