Forum Moderators: not2easy

Message Too Old, No Replies

IE PNG Filter

Applying filter: progid:DXImageTrans...etc kills link

         

createErrorMsg

4:09 am on Mar 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here the code for an image swapped header...

html:
<div id="head">
<h1><a href="index.php" accesskey="h">Widgets'R'Us</a></h1>
</div>
css:
#head h1 {
width:410px;
height: 33px;
background: transparent url(images/head.png) no-repeat;
text-indent: -100.0em;
overflow: hidden;
}
#head h1 a {
text-decoration:none;
display: block;
line-height: 33px;
}

It happens that the "head.png" background image uses alpha transparency, so in the IE stylesheet is this...

#head h1 {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/head.png');
cursor:hand;
}

...to work around IE's lack of PNG support.

Appearance-wise, this is fine, but there is the unfortunate side-effect of the filter applied image "covering up" the nested <a>nchor so that, although the page renders identically between browsers, the header no longer functions as a link in IE.

Any thoughts on how to work around this without attempting to illegally nest the <h1> inside of the <a>nchor?

cEM

iamlost

5:30 am on Mar 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Known bug.

Do search for: .png transparency ie6 link bug for answer.

The background image dimensions are the key: some sizes OK some not.

createErrorMsg

1:45 pm on Mar 18, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thanks, iamlost. Skimmed right by it in several readings.

cEM