Page 1 of 1

PNG transparency for IE version < 7

Posted: 19. December 2008 13:46
by Huor
Ahoy m8tys,

i am not sure if this kind of question is allowed here - so if not - feel free to remove it.
I am working on a new site and have some minor problems with a header logo that has a alpha transparency. Its displayed very well in about 90% (or more) of all available browsers. But its not displayed correctly in older IE version.

So i have known of this issue with IE versions and thought to rebuild the graphic with only 8 bit alpha transparency. firstly this didn't worked properly and secondly the client i make this site for would not have any 8 bit PNGs (<--- that is not discussable for me :))

So hence i tried to enforce google to find a possible solution - and found a css hack with the AlphaImageLoader filter. Well this seems to work but not totally. As the logo now is transparent in IE older than 7 its displayed on Windows 2000 systems but the image is totally disbanded on Windows XP systems. I have no clue what else i can try or if i made anything wrong with my CSS. I didnt found anything proper via google. So my question now for ya all:

Has anyone experience with this kind of problem and a suitable solution by CSS definitions. As I would avoid any javascripting (cause that could be disabled by browsers). Is there a way to have a workaround to display the logo in all browsers (mainly on IE on the different operating systems).

I really would appreciate if anyone can give me a hint. Thanks in advance.
If necessary i can post code snippets if that helps...

-----------------------------------------------------------------------------------------------------------------------

edit: No one has ever made such an experience? Though to ask some web developers who spend some hours with their profession ;)

Re: PNG transparency for IE version < 7

Posted: 26. December 2008 20:45
by Huor
Although its unusual to answer own question i am going to do so now ;)
I found the solution for above mentioned problem and so will share my experience here^^

The problem with alpha transparency with IE < 7 seems to be known. There is a way to have a kind of IE CSS Hack to insert the filter element into the part where the image with alpha transperancy should be displayed, it:

Code: Select all

* html #<your tag> {
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true", sizingMethod="image", src="<path of the image>");
	background-image: none;
}
The problem with not showing image under xp is the parameter sizingMethod. I had previously cropped as value - but this will clip the element to the size of the parent element (in HTML). i had a <div> with no size and so the image was clipped at 0 x 0 px - that means its not displayed... I fortunately found under the MSDN what values for sizingMethod are valid and what effect those different values have.

Shortly: crop was false and image must be inserted ;)

BTW: I now run into another problem with positioning and iframes and its width where i could need a hint as well...
The IE displays the iframe until a specific width. With scrolling set to auto the scroll bar is displayed when the content doesn't longer fit to the defined width of the iframe - so far so clear. But again the IE 6 seems to add the scrollbar to the defined size of the iframe - so an eventually existing border on the right side will not show cause the scroll bar is positioned over this border. It seems only IE 6 has this problem and no other. In all other browsers this problem does not exists - there the scrollbar belong to the defined width of the iframe. So my question now: Has anyone a clue how i could avoid this and what defined i can try to show the iframe with scrollbar in the correct order? I tested several stuff but seems all not to work properly ;(

Thanks in advance...
and a merry xmas ya all!

Re: PNG transparency for IE version < 7

Posted: 15. February 2010 10:54
by chrisssteeven
I started working on a new webpage yesterday. It looks great in IE 8 and FF. But in Ie 7 and lower, it looks like..?
If you view the site in IE 7- you will see that it doesnt display it right. I used margin and sometimes padding to align the div elements so it would look good.
And if anybody know an easy way to fix the IE Transparency bug, please tell me.
Any ideas whats going on?.

Thanks.