– Ponderings & code by Drew McLellan –
– Live from The Internets since 2003 –
AboutI’m sure most readers are aware of of youngpup’s Sleight code snippet for achieving PNG alpha transparency in Win IE 5.5+. If not, go look. You may find it useful.
On a project today, we wanted to implement a translucent PNG effect on some dropdown menus. Youngpup’s code only deals with inline images, not background images so I had to roll my own. You can download it. The instructions are just the same as Sleight.
Kudos to youngpup for the neat code, some of which I borrowed, some of which I replaced. It uses browser sniffing, which I’d normally avoid, but I think it’s okay in this context. It should fail gracefully if the sniff goes awry.
Update: The script linked above is now a revised version. See my notes.
Comments
If needed, the browser sniffing can also be replaced by IE 5 PC Conditional Comment.
I’ve tried reading the AlphaImageLoader specs at MS, but they just confused me more.
Help? Please? :-)
As a benchmark, try the page in Mozilla.
Check over the instructions again if you’re still unclear.
There do seem to be funny situations where the IE filters don’t work properly, so it may be you’ve found one.
Put the page online somewhere so I can look, and email me with the details.
OK So it turned out your solution was PERFECT... MY ”Transparent” GIF was not quite completely transparent- how humbling is THAT to learn?
You can see the mock-up page I used for testing at www.theinspiredjourney.com/transindex.cfm
YOU sir, along with YoungPup, are BRILLIANT!
Later
That bug has cost me hours... Thanks for the tip.
Has anyone has any success with that?
Thanks for the help getting over this crazy IE problem. You have gotten closer then anyone else I’ve found to solving the issue completely. I really need to be able to tile my backgrounds though, is there any way to get PNG’s to work with the CSS ’background-repeat’ setting?
Thanks heaps
To use sleight, you need to drop the sleight.js file in the head of your document.
Then make images with PNGs as the source:
[img src="/img/spacer.gif"> That is all. ———-
Am I just looking in the wront place? ;o)
I, too, am stuck on the HREF problem. I can’t for the life of me figure out why IE ’kills’ any HREF that’s inside anything with a PNG background. Ugh.
So, the 1px ’hack’ works.
Still, this leaves the unresolved issue that I still can’t make ’soft’ drop shadows. Which is a bummer. Maybe someday we’ll have an IE that works. *sigh*
In the interim, this solution works for now. Thanks!
To make this work in IE I’m using the previously provided PNG fix script...
This works great, however when the PNG is referenced, all HREF links inside that TD break, but only in IE 6 - the links still work in Netscape 7x and Mozilla.
If I simply remove the background-image line from the CSS, the links work, but no png appears of course.
For reference:
www.theinspiredjourney.com is the page
www.TheInspiredJourney.com/scripts/TempSite.css” is the Style Sheet.
Any help would be greatly appreciated.
When posting this question about the HREFs not working in IE 6, I hadn’t seen the post by Chris!
Just making my PNG 1 pixel tall now allows IE to both recognize the semi-transparent PNG background AND allow HREF links to work!
AWESOME!
A shame, as this looks like it could otherwise be very useful!
If there are any solutions for this please enlighten me:)
as msdn states: “The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute…”
so, you can use the !important hack to make completely flexable alpha-transparency divs:
div#test {
auto !important;
% /* ie fix so alpha-transparency renders */;
}
thus far the 100% has worked fine, but you can actually put anything in there for it to work (em or 1px or whatever).
hope that helps.
The href between begin-div and end-div has an extra pair divs above them and in that extra pair the background-image(‘url’) has been given and in the second pair not.
Thanks for this site and everybody thanks for there posts.
I can now design with confidence again. STUPID IE!
Thanks again for the brilliant hack…
– A
This works great for me apart from one little problem and that is that I have a logo image hidden that is now shown visable when the PNG code is used. When I remove the code the logo is hidden.
Anyone got any ideas on how to fix this?
Cheers
Karl
oh, and it only happens with < ie 6 xp-sp2 – looks great with xp-sp2’s ie
can be seen at www.westmeadows.org/v3/index.html
the spaces arn’t there when sleightbg is disabled, as can be seen at www.westmeadows.org/v3/nosleight.html
of course, works fine with ie6 sp2+ and firefox/ mac-ie
khkljh
.tinted {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="/img/spacer.gif"> }
.tinted[class] {
"www.gravatar.com/avatar.php?gravatar_id=fe47787e5ed2e1c896bc72439029d9b5&size=60&default=identicon" style="px;px;" /> Seth Thomas Rasmussen: Your script works nicely, Drew, but I noticed something: You don’t need the transparent background image. Simply setting the backgroundImage property to “url()” gets rid of the funkiness.
Has anybody been able to do this? I think I’m simply pushing it too far on this one…
This works as advertised in all browsers except for IE/Win. The PNG aligns itself to the top left corner of the box, ignoring the CSS. Hmmm.
I have found a way to use a bg image of any size using IE’s AlphaImageLoader, but also enabling anchor links within the DIV.
In CSS, set up the filter in the usual way:
div#BOXER {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/spacer.gif"> }
The ensure that children are positioned eiter relative or absolute, e.g:
div#Boxer* {
position:relative;
}
That’s it! HREF links inside the DIV will now work.
Here’s my CSS :::
#leftwrapper {
background-image: url(images/left_top_bg.png);
%;
px;
position: absolute;
top: 0px;
left: -23px;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/img/spacer.gif"> }
#testinside {
position: relative;
}
My BODY consists of the parent #leftwrapper and the child inside #testinside with a link inside #testinside.
Simple enough right? And I thought I followed all the directions above carefully.
I am able to see the transparent PNG in IE/Windows, but the HREF is still disabled.
Any ideas??? :) :) :)
thanks in advance,
Tino