half transparent image in IE

**Dennis_Gull** · 07-13-2007, 03:18 AM

hello, im trying to get a half transparent PNG to show as it should in IE (without a gray background) and I found this code:

Code:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');

it will make the PNG show as it should but it wont show anything in FF so I also wrote the normal code that looks like this

Code:

background: url('image.png') no-repeat;

but then IE will get both the images... how can i solve this in a easy way? the GIF image can only be 100% or 0% transparent so I cant use it.

**jscheuer1** · 07-13-2007, 04:05 AM

Code:

<style type="text/css">
#pngbg {
background: url('image.png') no-repeat;
}
</style>
<!--[if lte IE 6]>
<![if gte IE 5.5]>
<style type="text/css">
#pngbg {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');
}
</style>
<![endif]>
<![endif]-->

BTW, for an alpha loaded image that resembles a:

Code:

background: url('image.png') no-repeat;

I believe that the correct sizingMethod would be 'crop', not 'scale'.

**Dennis_Gull** · 07-13-2007, 07:47 PM

Thanks for the help, I made a formIE.css file where I keep all the fixes for IE but I countered a problem with this solution. A part of the site get "inactive" or rather that the browser act like the image is over the text but it isnt.. is there any better way to get semi transparent images in IE? is there a better image format that is supported in IE for example?

**Dennis_Gull** · 07-14-2007, 12:18 AM

I found a fix for the link bug, I had to add:
a {position: relative}

found it here (last comment):
http://www.daltonlp.com/view/217
but I had to add it to all the input files that was affected to... anyways it worked, although its way to much work as i have to apply it on all the input files..

edit again:
hehe if I write this instead everything works:
td {position: relative}

but if I open the IE browser and the whole page is relative it will move to the left the first pageload (even thought body is centered with margin: auto; )

**jscheuer1** · 07-14-2007, 03:26 AM

Originally Posted by Dennis_Gull

Thanks for the help, I made a formIE.css file where I keep all the fixes for IE but I countered a problem with this solution. A part of the site get "inactive" or rather that the browser act like the image is over the text but it isnt.. is there any better way to get semi transparent images in IE? is there a better image format that is supported in IE for example?

That should only happen with this filter in IE 7. But, if you followed my instructions, the filter would not be applied in that browser. It doesn't need to be. IE 7 handles semi-transparent .png backgrounds just as well as any other modern browser.

**Dennis_Gull** · 07-14-2007, 05:16 AM

but this is a problem on IE 6.0

**jscheuer1** · 07-14-2007, 06:09 AM

Originally Posted by Dennis_Gull

but this is a problem on IE 6.0

Well, I'm not too clear then on what the problem is. If you have solved it to your satisfaction already, fine. Otherwise, a more detailed description of the situation, and (more importantly) a link to a demo of the problem would be required.

**Dennis_Gull** · 07-14-2007, 01:46 PM

Sorry for the short reply

However Im working on a local server but I can quote from the link i posted:

...bug/problem in IE. Using alphaimagefilter on a div makes links inside the div quit working (they appear as links, but don't respond to mouse clicks or hovering).

apparently it works with some of the heights and widths according to the author .

and one of the comment was:

Link bug in IE 6.0 solution: a {position: relative} for that affected link. :-)

but as I said, it sometimes makes the site funky and everything get pushed to the left side. (would work if I had the site on the left side)

**jscheuer1** · 07-14-2007, 02:18 PM

Making a link's position relative, in and of itself, shouldn't change the layout of a page. There must be an interaction with some other style of that link or its parent element(s). Even then, without a left, right, top, or bottom property, it is still unlikely that position relative will change the link. It will change the link's children, if they have anything other than the default positioning.

However, I was unable to duplicate this problem:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-color:lightblue;
}
.pngbg {
background: url('Image1.png') no-repeat;
white-space:nowrap;
}
</style>
<!--[if lte IE 6]>
<![if gte IE 5.5]>

<style type="text/css">
.pngbg {
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Image1.png', sizingMethod='crop');
}
</style>

<![endif]>
<![endif]-->
</head>
<body>
<div class="pngbg" style="height:300px;width:300px;margin:0 auto;"><br>&nbsp;<br>&nbsp;<br>&nbsp;<br><br>&nbsp;<br>&nbsp;<br>&nbsp;<br><br>&nbsp;<br>&nbsp;<br>&nbsp;<br><a href="http://www.google.com">Google</a></div>
</body>
</html>

Thread: half transparent image in IE

Thread Tools

Search Thread

half transparent image in IE

Bookmarks

Bookmarks

Posting Permissions