HTML Forum

**CSS4Life** · 10-11-2007, 06:08 AM

OK I've finally got image transparency in IE6 working on a logo on my redesign but I've still got the original image (not transparent) over the top of it. I want to block the original image in IE6, and then show the transparent image instead.

Here is the CSS that's generating the new transparent image for IE6:

Code:

img {filter:progid:DXIMageTransform.Microsoft.AlphaImageLoader (src="http://whymhost.co.uk/redesign/logo.png", sizingMethod="crop";}

The current XHTML is shown below:

HTML Code:

<img class="floatLeft" src="http://whymhost.co.uk/redesign/logo.png" width="193" alt="Whym Hosting logo" height="100" />

The template I'm working all of this on is here and the IE6 CSS file is here.

If someone could help, it would be very much appreciated.

Dan

**coolkbk585** · 10-11-2007, 06:36 AM

What exactly are you trying to do? Are you saying that you have two different images that appear in the same place, depending on the browser you're using? If that's the case, then you would just use Browser-specific comments.

**CSS4Life** · 10-11-2007, 06:44 AM

Well try this:

http://www.netrenderer.com and enter http://whymhost.co.uk/redesign.

Make sure you've chosen IE6. You'll then notice that there is part of the transparent image above the non-transparent one. Firefox and IE7 support transparent PNGs but IE6 doesn't. I used a hack/filter in IE6 to get it to support transparent PNGs but now it's still displaying the non-transparent one too.

I want it to display the non-transparent one to be hidden in IE6, but to show in FF and IE7.

**maxxximus** · 10-11-2007, 07:10 AM

There is only one image. Your fix is not working dude.

**CSS4Life** · 10-11-2007, 07:16 AM

Have you tried netrenderer.com as I mentioned?

If you have, then you will see a tiny part of the transparent logo above the non-transparent one. I have played around with this earlier and I got it mostly to work by messing up the XHTML, but this meant that FF or IE7 couldn't see the image at all.

The method does work, I just need to be able to get rid of the non-transparent one from displaying in IE6

**ADAM Web Design** · 10-11-2007, 11:10 AM

You could cheat and not use the image tag.
Put the image as the background in a div file, and then in IE6 set background: none; and then have the fix.

Something like:

Code:

#logo {
     background:  URL(../images/logo.png) top left no-repeat;
     width:  193px;
     height:  100px;
     float:  left;
}
... this is IE6 stuff ...
#logo {
      background:  none;
      ugly PNG code here.
}
<div id="logo"></div>