Forum Moderators: not2easy
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