Forum Moderators: not2easy
filter: progid:DXImageTransform.Microsoft.AlphaImageLoaderThe next step was to add a link around the image. The link is only displayed in FF, because IE stylesheet is set to place the image left, for the transparent img to be displayed correctly (
padding-left: 247px;So for this to work in IE, the link was placed around the surrounding div. I seem to recall that this is not good practice? Now the link works in IE too, but the image flashes for a split second on hover over the transparent.png.
Has anyone seen this before and now of a quick fix?
HTML
<a href="index.htm">
<div class="bgimage" style="background: url('/img/blah.gif') transparent 0% 0% no-repeat;">
<img class="transimage" src="/img/transparent.png" width="200" height="150" border="0" />
</div>
</a>
CSS
.bgimage,
img.transimage {width: 200px; height: 150px; float: left;}
IE CSS
.bgimage {width: 200px; height: 150px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png'); padding-left: 335px;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Any ideas are greatly appreciated.
I don't want to look bad but to me, this is not XHTML Transitional valid... I know it is not your main issue here, but still it is one major issue.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<title>First COokie</title>
</head>
<body>
<a href="index.htm"><div class="bgimage" style="background: url('/img/blah.gif') transparent 0% 0% no-repeat;"><img class="transimage" src="/img/transparent.png" width="200" height="150" border="0" alt="" /></div></a>
</body>
</html>
Rgds
Try something like this:
<div class="bgimage" style="background: url('/img/blah.gif') transparent 0% 0% no-repeat;">
<a href="index.htm"><img class="transimage" src="/img/transparent.png" width="200" height="150" border="0" /></a>
</div>
Then style your <a> like this:
.bgimage a {
display: block;
width: 200px;
height: 150px;
}
You mmay need to add some other styles (overflow?) to get it to line up correctly (I haven't tried it), but the goal would essentially be to tell the <a> element to fill the contents of the containing div.
[edited by: Fotiman at 4:39 pm (utc) on May 17, 2007]
I tried adding a class to the
aSo now I've added similar code to what Fotiman suggested:
.bgimage a.test {
display: block;
width: 200px;
height: 150px;
}
and also floated it left, because when I inspect the HTML in IE with the DOM inspector, the Div is aligned to the right of the background-image which is displayed.
Something for me to dream about tonight.
I tried adding a class to the a tag this afternoon, because there are other links inside the same div, but still couldn't get that to work.
What about using
.bgimage a:link.test, .bgimage a:visited.test, .bgimage a:hover.test, .bgimage a:active.test {
instead of
.bgimage a.test {
and also floated it left, because when I inspect the HTML in IE with the DOM inspector, the Div is aligned to the right of the background-image which is displayed.
Floating it will essentially take it out of the flow, which may or may not be desirable (not in most cases). You might also be able to do something like:
position: relative;
top: 0;
left: 0;
instead of floating it. Just a thought.
What about using.bgimage a:link.test, .bgimage a:visited.test, .bgimage a:hover.test, .bgimage a:active.test {
instead of
.bgimage a.test {
That shouldn't matter (unless you have another rule with equal or greater specificity overwriting your rule).
[edited by: Fotiman at 6:33 pm (utc) on May 17, 2007]
position: relative;
top: 0;
left: 0;
margin-left: -200px; /* To move the link over the bg image */
but this sort of defeats the whole object, because now the transparency is not implemented. Please note that the padding-left in IE (listed above) should be 200px (same as width of the image). I can place the A tag precisely on top of the image, but as far as I understand in IE one needs to offset the transparent image for it to be displayed correctly. By moving the A tag over the background image, the transparency is lost and a white and light blue image is displayed on top of the img.
Ideally the div structure should be:
<div>
<a href="#"><img /></a>
</div>
I can't think of a better way of explaining myself. Otherwise it just wasn't meant to be.
[edited by: SilverLining at 11:40 am (utc) on May 18, 2007]
Fotiman, why style the link display: block? A,><img/></a> is fine.
The reason to make A a block element would be if you wanted to keep the same markup: <a><div><img/></div></a>
The reason I added display block was so that you could set explicit width and height dimensions on the <a> to make sure it correctly surrounded the <img>. It would be invalid, though, to assume that you could then wrap a <div> with the <a>.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<title></title>
<style type="text/css">
.container {
background-image: url(test.png);
position: absolute;
width: 200px; /* width of test.png */
height: 150px; /* height of test.png */
}
.innerWrap {
width: 200px; /* width of test.png */
height: 150px; /* height of test.png */
}
</style>
<!--[if lt IE 7]>
<style>
.innerWrap {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='test.png', sizingMethod='crop');
}
.container {
background-image: none;
}
a {
position: relative;
z-index: 1;
}
.transimage {
visibility: hidden;
}
</style>
<![endif]-->
</head>
<body>
<div class="container">
<div class="innerWrap">
<a href="index.htm"><img class="transimage" src="test.png" border="0" /></a>
</div>
</div>
</body>
</html>
