Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

onLoad breaks png transparency IE6 - any idea why? 2

Status
Not open for further replies.

Microbe

Programmer
Oct 16, 2000
607
AU
Hey folks,

I am building a site and have some transparent png images. A common header is used through out so when one page didn't show transparency in the header images I knew it was something on the page.

I eventually found out that having anything as an onload breaks the transparency. Doesn't matter if I use <body onLoad... or document.body.onload at the end of the body.

I am using superslight to fix IE6 transparencies.

I have removed the onload for now as it was only focusing curor in form field, but would like to understand what is going on.

Any ideas on what might be happening here?

Thanks in advance

Steve
- I have fun with telemarketers
 
It sounds like "superslight" is hooking itself into the onload event and you are overriding that, causing it not to work.

Some suggestions:

1. Don't use superslight, and instead do the job yourself with a simple IE6-only style sheet (alpha filter, conditional comments).

2. Don't forcibly override the onload event, but instead attach a listener for it (the superslight code could be said to be just as bad for doing the same thing).

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
...superslight...
I have never heard of this. I have also never experienced this myself when handling alpha transparent PNGs in IE6. If you post your code (or rather a minimal test page showing the problem) we may be able to find out what is going on.

I use the following method, and it works a treat:
Code:
...
<style type="text/css">
.opaque {
  background: url(../img/an_alpha_image.png) no-repeat left top;
}
</style>
<!--[if IE 6]>
<style type="text/css">
.opaque {
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=[!]scale[/!],src=../img/an_alpha_image.png);
}
</style>
<![endif]-->
...
I have highlighted the word "scale" above. This will stretch the background image to fit the space. An alternative is to use "crop" which will not scale it. There are other options documented on the MSDN site.

Let us know how you go.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
I wrote an FAQ in the HTML, CSS forum about this a while back:

faq215-6640

Hope that's of some value as well.

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler
[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094
 
Great stuff. Thanks a lot it works well with a background image.

Is there a way to apply this to a regular embedded image?

I have played with it but can't manage to get it to work.

Steve
- I have fun with telemarketers
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top