half transparent image in IE [Archive]

View Full Version : 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:
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
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

Dennis_Gull

07-13-2007, 07:47 PM

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

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

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:

<!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>

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