We’ve all seen them, the hoards of PNG fixes for IE6. That is because IE6 is a bag of smashed buttholes. I’m serious. It is. That is why we (web designers of the new world) have to continually come up with creative ways to solve the PNG issue. In case you are lost, just realize that in IE6, PNG images with transparency do not show their transparent regions, so you have to use some crazy IE6 proprietary filters. Moving on.
Lately, in projects I have been using a modified CSS snippet I found out on the interwebs to automagically replace PNG images with their AlphaImageLoader equivalent in IE6. Check this out here and I’ll explain and give an example:
The CSS/Code
* html img,Update: This code changed to remove the behavior at runtime based on @Thierry’s suggestion.
* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true)
);
}
For you purists out there, this is extremely hacky, so you may want to skip this whole entry entirely.
Update: : CSS Conditional comments for IE are a perfect way of hiding this hacky code from the good browsers. Here is a way to bring in the CSS for only IE 6 and below:
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="png_fix.css" />
<![endif]-->
Ok, there won’t be much in the way of explanation here, but let me explain what this little bad-boy does.
The Selectors
* html img,
* html .png
The selector portion of the CSS rule targets which XHTML tags/classes this rule will be applied to. At first glance, it looks like all img tags as well as all tags with a class of "png". You’ll notice the (star) html in front of both of these. Wait, there is no “anytag” preceding the html tag, so this won’t get applied! True. For all non-crappy (that is a pro term by the way) browsers, this rule won’t get applied. However, since IE6 is a pile, it thinks that there is a tag before the html tag, so it will apply this rule. Great! Now IE6 is the only browser that will use this rule.
The Rest of the Code Jargon
Honestly, the rest you really don’t want to mess with much, but it suffices to say that this expression does a few things:
- If the tag is an
IMGtag, the expression checks to see if it is a .PNG image. If so, it applies a CSS AlphaImageLoader filter to the IMG tag to load the PNG file as a background image. It then points the src attribute of the image to a transparent gif so that the image isn’t overlaying it’s own background. Voila! Note: This only works well for images not resized by the browser. Also, you’ll need a transparent gif 1px by 1px image on your server. - If the tag is not an
IMGtag, then this expression takes the CSS given background image and shoves it into a background AlphaImageLoader filter. It then removes the real CSSbackground-imagerule so that the background and the filter are not conflicting.
Pretty cool! Please note that this CSS expression is pretty generic. If you have some crazy CSS-ing to do, you might want to stick with using your own methods or apply the AlphaImageLoader filter manually.
Also, if you are a standards-compliant junkie and this brushes you wrong, remember that this is intended to help with the crud of browsers. Sometimes we have to break our own rules to do the job.
A Demo!
Let’s see a demo! See the goodness below:
My Image Tag:
My Generic Tag
My Link Tag
Update: Links will need an additional rule of cursor: pointer; to restore the cursor. I’ll have to change that in the script to do that automatically
I like it. Except the CSS won’t validate (or as you say, it’s hacky).
I think it would be much better to use “conditional comments” so that only IE6 will see it.
Conditional comments are ideal because they are real W3C-compliant comments that only IE6 chooses to read. So, you get the best of both worlds. I would do something like this:
@import "/png-fix.css";
and put all of the hacky stuff inito png-fix.css.
Actually the conditional comments worked so well in my example above, you can’t even see them. But, you get the idea.
Great suggestion @Bill. I have updated the tutorial to reflect your additions :)
don’t care if it’s hacky – if it works where it’s supposed to, that’s all I care about. I shall banish it to the depths of my IE6 CSS file in the morning! many thanks for this – I’ve just been looking for this very solution!
I’ve read the same on some other blog, but it was getting way more into the scripting side.
Thkx for making it a lot more easier to understand, it’s such a shame nobody thougt of this a few years ago…
Hmmm…tried it on my site, doesn’t seem to be working. Not sure what I missed, perhaps you can take a peek & point me in the right direction?
BTW, If you have IE7 installed as your default IE, but you have a copy of IE6 running as a standalone for testing, your standalone install of IE6 will think that it is IE7 when it looks at the conditional comments. You’ll want to test the CSS out without the conditional comments to make sure it’s working. Then add the conditional comments back in so that it never interferes with good browsers.
@Bill: You should be able to fix conditional comments using the methods over at PIE – they’ve always done the trick for me.
Great tip for fixing PNGs. I long for the day when we won’t have to use these hacks any more ;)
@All: Word to your mother on gettin’ rid of these hacks. One day IE6 will be banished to the fires of Mount Doom as it should. For now it will just infect us and make us weaker.
@Jeff: Dude, tell me what’s going on or link me. I’d love to help you out on this issue. Maybe it’s a wee glitch in this script…
must be used “/style/images/transparent.gif”? ……
Great ! That is THE technic to fix PNG transparency.
Thanks a lot.
It’s not working in IE6. Lock at the screenshot: http://www.cgdesign.de/screen.gif
Does this work with repeated background images? (Something that has also been missing from other techniques).
@Neil: Unfortunately, repeating background images doesn’t work with this technique. Man, I wish it did!
@Christoph: Hmm, I can’t seem to replicate your screenshot. Are you running multiple versions of IE?
Nice article. Finally a good solution to the PNG problem in IE6.
Thank u!!!
Nice article with great solution to this problem. Otherwise users have to shift to .GIF but unfortunately they don’t support 24bit colors and alpha transparencies.
Great trick – however it doesn’t seem to work if the background image is a link. Or rather – the technique works, but the image isn’t linked anymore.
I am using background images for navigation – using image replacement, and while the transparency works like a charm they’re not clickable now
Is there a way round this?
@Chris: The trick should work as a link, in fact I will update this post to show a link, however it is a known glitch that in IE6 any child link tag within a AlphaImageLoader filtered tag will be rendered useless. That is to say, you got a link in any tag that has an AlphaImageLoader filter, it will NOT work. However, It may work when applied with JavaScript.
Hi, I tried this method but Im having the problem where it displays the png correctly, but over the top of that has the non-loaded image box with a red x. Any ideas? Many Thanks
@Tom H: Tom, be sure that you have the transparent.gif image uploaded to your server and that the path to it is correct.
Hi
I would like to use this for a white logo on different coloured backgrounds. It needs to be positioned on the right hand side of my header using css. Will it position bottom right? Thanks
@Simon: Sure, add some css to make it absolutely positioned, or better yet absolutely positioned within a relatively positioned header. Then apply add the rules bottom:0; right:0; That’s it!
Who knew? I could have sworn that azimuth property had something to do with accessibility for the deaf! This works very nicely btw :) and I added a js file that automatically adss the .png class to png images to ease it up a bit.
Good job!
A “bag of smashed buttholes”? Classic!
Hi there
A really clever attempt to “crack” the IE png-problem.
One thing that bothers me…what about the performance ?. Normally expressions in CSS are really performance-heavy, and your solution “connects” directly to all img-elements in the DOM !
Cheers
BJ
Anyone who is having trouble with using PNGs in links on IE6 needs to avoid having the links absolutely positioned. For some reason IE6 will not let you click on a PNG background image when it’s absolutely positioned. I believe there is a way to fiddle with the z-index and trigger hasLayout in order to fix it. I can’t remember the details offhand, but doing a search for “absolutely positioned PNGs in IE6″ should give you some more info.
Rogie, nice one here. I have tweaked your code a little bit and it now works in IE6 with repeated background images. All you need to do is to change crop to scale. It works like magic!
I wrote about this addition to your png fix in my blog.
Regards.
@Luke: crap! azimuth….ok, lets choose a rule that doesn’t hinder anyone.
@Bjarne: Word. Maybe a rule of * html img.png would suit better. That way this script only works on images with a class of “png”.
@Anna: Very smart of you. However, scale will only work in one axis only, so if you need to repeat-x or repeat-y, you are golden, however if you need to actually repeat as in tile, I guess you are out of luck ;)
really nice hacky code!
But did you think about productivity of the script? As you might know expression will be calculated on each action on a page(click, resize, hover), not so good when you got dozen of them.
And actually there is a way to execute it once on load. I’m just not sure weather your code taking it into account or not?
Some links for light reading – November 13th, 2007…
Semantify, and CSS tools based on Blueprint…
CSS expressions are evil ;-)
http://developer.yahoo.com/performance/rules.html#css_expressions
@Theirry: I totally agree. So you have 2 solutions:
1: Hand code filters for PNG transparency.
2. Recode the core of IE6 to make it NOT crap.
Enjoy.
I’m working on a website with a lot of png. This hack is beautifull. But i’ve seen to run in to a problem. For a specific object I overrule the standard background png defined before, to this I need to use “!important” on my background value in css (talking about a background on a div). But when I use “!important” the hack doesn’t work for that object. Now I’m going to try to figure out anther work around, but maby some of you readers have already got the solution? Many thanks, Jasper – mediaCT
Thierry: They’re not if you know how to use them.
Calculating
heightfor element can and should be done real-time, without any checks, but if you simply replace elements or add new content, you should do this:jscript: expression(this.p ? 0 : (
//your code here,
this.p = 1
)
);
This way code gets executed only once. I’ve been using them for a looong time and I haven’t encountered any problems.
Rogie, let me be an attention ho and link to my fixes for adv CSS. ;-)
And one more, I finished it yesterday. Believe or not, but this splash page looks the same in IE6, thanks to
expression(). :)This is soo true. Do any of you nay-sayers know that IE7 supports first-child, advanced selectors, transparent PNGs and has all the Position is Everything bugs squashed?
Whereas I need 10KB of hacks for my site to look the same in IE6, I only need 1 for IE7 (usually Generated Content, which I’m using for some time to clear floats).
Expression() FTW, we can’t live in the Stone Age forever.
Bravo! I’ll be using this on my next project.
Beautiful footer for this comments box by the way.
As for links within a container with this fix applied, you can give them “zoom: 1″ or “position: relative” to trigger hasLayout and they should work.
@Riddle: How many times
this.pis evaluated?Thierry: You make IE think more when you hover a link than this small condition based on expando. :)
AFAIK dropping “this.” where it is possible will make expressions 1-2 times faster.
just my 2c
Riddle: but that’s the whole point, as making IE thinks more is not really a good thing.
Anyway, looking at this example, why not going with “behavior” rather than “azimuth”?
* html .png {behavior:expression((this.runtimeStyle.behavior="none")&&(/* the stuff goes here */))
}
this.runtimeStyle.behavior="none"Should make sure it is ran only once.
“That is because IE6 is a bag of smashed buttholes”
LMFAO! I almost shot Diet Coke out my nose on that one!
Kewl! First time I have seen your blog and so a good start with a very good article on this buggy IE! The best solution however would be a mass assassination of all IE6 but alas I doubt it :(
@Thierry: This is just the sort of thing I love to get comments back on. Let me see if I can implement the changes and modify this entry to reflect your changes.
This is so cool. I have always disliked the png fixes for ie 6 and therefore never used them. But now that i have a fix that takes place through the css and fixes background images, i might rethink that. Many thanks for this ingenious fix. Just so happens that i came across this site at the same time that i inherited a site built by someone who didn’t know png’s didn’t work in 6. You saved me a lot of headache. Thanks again.
@Riddle:
your example pages are excellent.
I took a look at the studio page link and was noticing that IE was downloading the button PNG everytime the background image shifted colors, is this just a caching issue on my side?
you may find my version more advanced (also it was refactored by CNET.com javascript developer)
http://blog.creonfx.com/internet-explorer/ie6-png-transparency-fix-javascript
or the refactored version
http://blog.creonfx.com/internet-explorer/ie6-png-transparency-fix-with-javascript-v20
This is a great bit of coding!!!!
I hope someone could adapt it to make it work for repeated background images though, then it would be a killer script!!! Mainly for helping with background image borders that go from a colour to transparent where you can only use a png image.
Sorry, should have read all the posts in here first!!! Got it to work using Anna Vester’s code. Thanks.
@Peter: Great work. For those that want to use a JavaScript framework, that is bomb.
Rogie: Thanks much for the excellent examples and explanation (forgot to mention that in my comments above)!
np – frameworks save me a lot of time because i use it for couple of others scripts and not using a framework would cost me the same bandwidth penalty
Cheers
Hi there,
Thanks for the fix. I was using a Javascript fix (http://homepage.ntlworld.com/bobosola/pngtestfixed.htm) that worked similarly except you had to assign a width for all images which is fine until you start using background images.
Both worked except for the top and bottom background images as shown here (http://www.e11world.com/pngfix.jpg)
Can anyone tell me what I’m doing wrong?? Original page files are here (http://www.e11world.com/interactive/)
As it’s replacing the foreground image with a transparent gif, I assume Right-Click > Save Image As.. won’t work?
Great stuff! Thank you very much!
@Tom: You got it right. Stickin’ it to the IE6 users.
Shouldn’t the conditional comment target IE6 and below as opposed to the above which only targets below IE6?
IE: if lte IE 7
@phoose: “lte” stands for “less than OR equal to”, so in the case of “if lte IE6″, the code will work on all Explorer browsers less than or equal to IE6 that support conditional comments of course.
Hi!
I finished the translation of your article for the Portuguese language. Thanks for the permission.
If you want to see:
PNG Image Fix for IE (pt-br)
thanks for the GREAT post! Very useful…
It works great, but the background images are positioned in the upper left corner, while they were centered or positioned right in the original CSS.
Hey Rogie! Thanks for this great tutorial. One question though.. How come IE6 shows the alt-tag next to the image? Is there some way to prevent this without removing the alt-tag? I kinda want it to validate. :)
Thanks again.
Unfortunately the W3C CSS validator recognizes some errors…
Thanks a lot! this tecnique works great but i’m having some trouble with png that need to be “rollovered”.
in fact, if you have something like this
a:hover { background: url(something.png) no-repeat bottom center;}
this “fix” kills all the background position rule…
any suggestion to avoid this?
@Pix: Unfortunately, this won’t work with
background-positionin CSS. I haven’t seen IE’s ability to background position a filter…you are probably going to have to get really tricky with your CSS to pull that off.@Anders: I just tested it in IE6 and I cannot see the alt text next to the image. Are you sure you uploaded the transparent.gif file and it’s path is correct in the CSS?
This fix is great, I’m so happy with it. However, like the poster above me, I think it would kick even more butt if it could be used with the sliding doors technique for rollovers in IE6. Has anyone managed to achieve this with a png graphic and successfully implement this fix at the same time?
Thanks :)
Hi -
Can someone please help me with this? I’ve got everything set up exactly (as far as I can tell) as it should be, but I still get the blue background. I’ve gotten it working putting the filter stuff inside a file tag for an image, but not in the stylesheet. I’m at a total loss. Check it out
Thanks!
Sorry, that link should be to http://www.tarves.net/test
GREAT FIX!!!!!!!!!!!!!!!!!!!!!!!!!
the best that i saw.
Thanks for sharing this wonderful css code. im gonna use this to my personal site. :)
This workedperfectly for me thanks for the help! In a few cases I decided it would just be easier to build a duplicate png as a gif image and call that when ie6 loaded, but otherwise where i really didn’t want to give up quality I kept my pngs.
For all if you need a great way to use multiple versions IE’s there is a cool program I got yesterday. here is the link : http://tredosoft.com/Multiple_IE
I have a form over a png background image that I can’t get to work – when this is applied there you can’t focus on the fields in IE6.
I was able to get links over png background images to work just by adding position:relative, but that didn’t work for the form.
Any ideas?
Forgive me if any of this has been addressed. I’ve been working quite a bit with AlphaImageLoader and these issues so I thought I would answer a few inquiries.
First, the AlphaImageLoader filter does screw up links. Not always. It depends on the CSS properties assigned to the link. There is a fix that seems to work. If you assign a position: relative to the “a” tag it will usually fix it.
Second, the AlphaImageLoader does allow for repeating background images or positioning background images within an element. However, for certain types of images, such as 1px by X, x or y repeats or 1px repeats, you can set the sizingMethod to scale. Scale will stretch the image to fit the defined area.
@Brie, the position: relative on the input fields should fix your form focus problem.
Thank you so much! This was the simple solution I was looking for. So now we can only wait for the last IE6.- users to upgrade their software to give us webdesigners/developers some time to die our grayed hairs…
http://stmap.beautifullalaland.com/index07-2.html
I used it already and it works, it saves my day. Thanks
I’ve been struggling with IE and PNG just like the rest of you guys and this this has been the best implementation of the alphaImageLoader fix that I’ve seen. Easy and as clean as it can be in all it’s messyness ;)
THANKS!
as suggested for repeating there are not many possibilities, i tried scaling here – http://blog.creonfx.com/internet-explorer/ie6-png-transparency-css-background-repeat-fix
also we may try flash, or repeating divs with javascript
What do you think ?
Another solution for the rollover problem can be a simple layer visibility exchange, like this (note that the layers are named “Layer1″ and “hiddenlogo”):
Great article and thanks for the ideas. I had a 24 bit png image as a heading background and this solution didn’t work for me for some reason, so I used conditional comments and css rule in the conditional css file for IE:
— THE CSS RULE —
#inner h1{
color:#fff;
margin:0;
padding:0;
background-position:top center;
background-color:transparent;
background-repeat:no-repeat;
background-image:url(../images/vts_title.png);
text-indent:-9999px;
}
— CONDITIONAL RULE —
— Conditional CSS rule in pngfix.css —
#inner h1{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’images/vts_title.png’, sizingMethod=’scale’);
position:relative;
width:556px;
height:23px;
}
Setting the width and height fixed the issue in this case.
Thanks very much ;)
Great ..thanks
But small problem is there, if we want background-position:bottom; then its not possible in ie6. could u plz help me…
hight is 300px image hight is 50px.. now i want image in bottom of the td… is it possible in ie6?
Hi there,
great work on the hack. Been searching for something like this for a while. Here is my website where I am using your code. Im no pro or anything so u might see some bad coding (be warned).
However the problem I have is that my links aint working anymore (in IE6 that is) Every other browser just sees my links like they should. Could u give me any help here?
Link; http://www.onemind-designs.nl/_projecten/lsz/website
Cheers,
daan
I, like a few others, do not have any success with this. I’m glad for all of you that have it working. I reduced things down to the simplest case and it still fails.
transparent gif: check
applied class .png to DIV: check
css included in style tag: check
made sure gif path in script was correct: check
No love. Curiously, I tried several other solutions that people seem to have working, but none work for me at all.
On another note, I came here with Firefox, but wanted to see if IE 6 works on your site here. Hitting this page in IE 6 crashes it hard. Now this could be( and the png problems as well ) because I am running IE 6 in Virtual PC, who knows? Microsoft products are utter garbage( I am typing this in Firefox on a rock-stable linux box ).
Follow-up!
http://24ways.org/2007/supersleight-transparent-png-in-ie6
A little bigger than the solution here, but it works.
Anyone? I can’t get it fixed. I even used position: relative in every a link. Meaning a:hover and such in my case.
Still hoping for a little help.
Greetz,
Daan
Okey, got it fixed now. Dont know how I did it since I did alot on it. So im very sorry for not being able to explain it.
Just wanted to let you know :-)
PNG TRANSPARENCY IN STD MODE (INTERNET EXPLORER 6)
If you are experiencing problems with this solution in IE’s “quirk mode” as I did (due to XML prolog on the first line of your XHTML code), try the above mentioned link:
http://24ways.org/2007/supersleight-transparent-png-in-ie6
This works flawlessly :).
That’s why I don’t use this solution.
great workaround.
thanks a lot
One of the site effect of this solution seems to be an extra request to the server of the for “GET /none” PER IMAGE. If you have a large number of requests, this can be significant. Haven’t looked at the solution in detail to figure out a fix..has anyone else seen this?
Hello, as sb else said, this css solution is just perfect, it’s clean and also works on dynamically added content :D
However, I come here to say that it caused bugs on a few GIF images that I had absolutely positionned. I don’t know why, but they were still here, but totally transparent. So I added something so the fix would only act on PNGs. The code I finally came up with :
behavior: expression(
!this.src.match(“png”) ? 0 : (
this.p ? 0 : (
……
this.p = 1
)
)
);
Thank you very much Riddle for the “p” trick !
For background images I added the filter manually, just had to set a height and a width for IE6 only (1px).
Sorry to comment twice, but I also found that on my website, only backgrounds set on “no-repeat” should be sized to “crop”, others should be “scale”, because I use 1px high images as background. So I modified the code in that purpose, it may help some people I guess. I have also addressed differently the issue I was talking about in my previous post, so it still supports the png class. Finally :
* html img,
* html .png {
behavior: expression (
(this.runtimeStyle.behavior=”none”) && (this.pngSet ? this.pngSet = true : (
this.nodeName == “IMG” ? (
this.src.toLowerCase().indexOf(\’.png\’) > -1 ? (
this.runtimeStyle.backgroundImage = “none”,
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\’” + this.src + “\’, sizingMethod=\’image\’)”,
this.src = “/images/common/transp.gif”
) : 0
) : (
this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace(\’url(“\’,\’\').replace(\’”)\’,\’\'),
this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\’” + this.origBg + “\’, sizingMethod=\’crop\’)”,
(this.currentStyle.backgroundRepeat != \’no-repeat\’) ? this.runtimeStyle.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\’” + this.origBg + “\’, sizingMethod=\’scale\’)” : 0,
this.runtimeStyle.backgroundImage = “none”
), this.pngSet=true
)
)
);
}
This css + giving 1px height to certain divs in IE6 (if no background appears at all, it means the div needs a 1px height) = everything works fine now (at least the best way that could be done) !
oops sorry, you’ll have to replace the \’ with ‘ in my code.
Hey Dude
This is brilliant.
I am having one problem though:
If I have nested divs and I apply the fix to the parent div, the content in the child div is somehow getting screwed up…!!
I validated my html and everything seems fine there..
Nice! Thank you for your post.
[...] entonces cuando buscando el archivo, me encontré con un artículo en el cuál decían que se podia utilizar la transparencia del png sin necesidad de archivos [...]
do you know if this will work in ruby on rails generated images?
[...] http://www.komodomedia.com/blog/2007/11/css-png-image-fix-for-ie/ [...]
@mae – Yeah, as long as they use an
IMGtag or a class of “png”, you should be set. :)[...] CSS PNG [...]
I have a div tag that has a png as the background. I used this code to show its transparency, but on the page there is a form over the png. For some reason the form cannot be focused on, and there is also an email link which doesnt work either.
@Chris – Try to put another
DIVtag around the form and give it a CSSposition:relative;I see a lot of site but some of them don’t seem to work.
So what is the most valid way of getting my PNG background image in css and PNG images on the page to work?
Thanks.
Thanks Rogie, that worked great. But i have another problem. I used fireworks to create a menu bar, and using the JavaScript that it created the hover states of some of the buttons which have transparency in them dont show the transparency. Does anyone know how to either preload pngs with transparency, or another solution.
@Kevin
You need to create a DIV ID with a background property in CSS. Something like this:
#main_content {
height:439px;
width:500px;
background: url(‘YourImage.png’) 0 0 no-repeat;
Then when put it in you html code you have to add the class ‘class=”png’ like this:
@kevin
I dont know why but it cut off the example of the div tag i wrote here it is:
This did not work for me. Suggestions?
@Chris,
You didn’t finish what you were saying on the second post. Did it get cut off?
@Kevin
Sorry the post doesnt show html code so what you should put in your html is:
DIV ID=”Maincontent” class=”png”
You would obviously need to put carrots around this but the class is necessary so that the alpha fliter is used on the div
Thank you very much Chris. I got it solved. YESSS!
Mate, this is something really good.
I got a prob with my CSS though. The website is using CSS backgrounds in png. How do you apply this to CSS images / backgrounds?
example in the css file:
div.corner1 {
background: url(images/bg_03.png) top right no-repeat;
position: fixed;
z-index: 4;
top: 0;
right: 0;
width: 400px;
height: 500px
}
@Asif – I think you are going to run into issues with
position:fixed;and IE6. Also, you will want to add the png class to that corner div like so:div class="corner1 png"...hello, very nice fix :P
it works for background png’s but i’m experiencing this problem with my navigation bar png’s:
i’m using the following code for my buttons, but the fix makes them unclickable, any ideas?
.button a:link, .button a:visited {
display: block;
background: url(button.png) no-repeat;
height: 26px;
width: 141px;}
.button a:hover {
background-position: 0px -26px;}
(the png has 52px height, using the first 26px for normal state and the bottom 26px for mouseover state)
@Nick
You need to put another div tag inside the one the holds the button image. This div needs to have position:relative;, and thats all in it to make the button work.
I’m confused about how to get css background images working.
I put ‘class=”png”‘ on the items, but it’s no good. Normal images are working, so the transparent.gif is correct.
I’m just a little confused.
I’m doing exactly the same as Nick, virtually the same code..it’s for rollover navigation…
#buttonHolder1{
position: fixed;
margin-bottom: 30px
}
#home{
display: block;
width: 79px;
height: 30px;
background: url(../img/navigation/home.png) no-repeat 0 0;
margin-bottom: 30px;
}
#home:hover{
background-position: 0 -30px;
}
Can you see where I’m going wrong?
Hello Rogie,
I’m on Mac, I write XHTML/CSS and a friend tests my pages on Windows, so… I came on your site. What a perfection, wow, I’m a beginner compared to that. You write a beautiful code…
Obviously, I peered at it (saw your comment on top :o}} nice way to say things! For sure examples teach better than tutorials, don’t they!)
A part from that, I want to ask you (will you give me an answer…?) HOW you manage to make these extremely precise small low-resolution PNGs ! I left the gifs recently because they are not enough, png is all new for me.
Do you start from a big one in high resolution and put the size down? HOW? Or else?
I don’t come to these results, it’s a pity. Would you give me a hint or is it too much asked?
I like your style. So much!
Normally, graphists are not developpers, and the other way round…
regards and admiration,
Rose
@Nick
To get background png images to show up you need to apply the png class to your div tags.
Either by
div id="yourid" class="png"or
div class="yourclass png"leave your other css code the same just add the png class.
If you still have trouble just view source this page and scroll down until you find where his examples are
Hello and thanx for the fix.
It does solve the problem with the png transparency of the previously centered background image that I have in the header of the page, except that now it isn’t centered anymore, it’s left aligned.
I am using now class=”png”.
And if I put the image in a img tag itcenters correctly, only that it shows an ‘x’ in the top left side of the image, like when the image is missing.
Do you have any suggestions?
@Andrew
If you look at the code for the fix, there is is a line that says something about this.src = transparent.gif
This is a transparent gif that is need for the fix, so make sure you have a 1px by 1px transparent gif on your server and you can name it whatever you want and put it where ever you want, just make sure you change the code to match your image
I used image transparent .png is all ok, but it don’t apply with background image. Help me please …
I’m an amatuer designer just started two months back and this png crap is completely ticking me off… I ain’t ever used css before so if anyone can help me out with some lil’ detailed info on how to do this I would really appreciate it. I’ve tried diff. methods n it don’t work. The closest i got to it was using the javascript tech. but that only turned my whole background that pathetic grey colour. PLS HALP!!!!!!!!
the site i’m working on is
http://www.spacegoatgoa.com
[...] CSS png fix för ie fungerade inte för mig. Länk Ej heller detta png fix: Länk Inte heller denna, vilket jag har för mig jag andvänt mig av [...]
I love you, you are a genius. After tearing my hair out with png fixes for a couple of sites i have largely tried to avoid using pngs AT ALL, until recently when i dared to have another go, been tearing out my hair again as none of the others seem to work completely right until i found your lovely lovely fix. You have saved my hair, my sanity and my website which now looks damn hot even in IE. :) :)
Good!
i had a problem with this,
for IE, i have a div with a png background. it looks like this.
My info is shown here.
for some reason, when i use a tag, or a tag to float left, style text, or whatever, in IE6, you cant select the text.
do you know the solution to this problem?
sorry. the html read itself.
<div class=”infobox png”>
<p>My info is shown here.</p>
</div>
</textarea>
for some reason, when i use a <p> tag, or a <span> tag to float left, style text, or whatever, in IE6, you cant select the text.
do you know the solution to this problem?
sorry. the html read itself.
<div class=”infobox png”>
<p>My info is shown here.</p>
</div>
(no textarea)
for some reason, when i use a <p> tag, or a <span> tag to float left, style text, or whatever, in IE6, you cant select the text.
do you know the solution to this problem?
first i need to thank u
so how i can this code for my web site
I like your site a lot, and I’ve been tracking down a viable CSS IE6 PNG fix for hours now… but when I open this page in IE6, it doesn’t display properly – all of your other pages are fine though. Might want to have a quick peek in ie6.
Keep up the great stuff tho, your site is really great.
IE PNG Fix v1.0 RC5
http://gedankenkonstrukt.de/iepngfixmod/iepngfix-mod.html
Thanks, useful stuff.
Does this Hack VALIDATES CSS????? as per W3C Standards
@shobhit: fuck validating, it’s worthless and irrelevant, if the shit works, it works
I don’t need W3C telling me it’s “not right”
shit that W3C considers “correct” shows different on every browser, so screw them
Thanks, it’s work perfectly..
@seutje: it might be shit for you, but it might be really important for a person whose site is not validating just cause of this FIX
and standards are standards they need to be followed at any case
@Shobhit: No, this hack does not validate. You would need to put it in an IE conditional comment.
@Rogie: Thanks Mate..
[...] Solution There are many ways to go around this problem, last night while working for the brand new Fuel Economy Sitelet for [...]
it seems that the links are not clickable at all… is there any solutions? i’ve tried to add the “cursor: pointer;” rule, but nothing happened!
thanks
webgis images not display at ie6 and ie6,
ff is display
what?
great fix!
could you provide this with the htc approach?
that would be of great help. I’ve been trying to loook for that with no success
it seems that is overwrite the center alignment..
On an express bug-fixing job with low budget I just did, this fix saved my but.
The link issue can be solved by putting in a larger transparent.gif which covers the entire area if the png. That will get your pointer back. The png will crop it to it’s size.
Otherwise the 1px gif will be the clickable area and that is a bit much to ask.
If a file fails to validate on hacks or other business that you know will not cut it, IMO it still validates. UTF-8 entities have the nasty habit of doing this as well as ampersands which you occasionally need to create dynamic paths in css. One could argue that is a weak point in the validator.
I laughed so hard at your first few paragraphs. I also love to use the phrase “interwebs”!
First saw your website on Smashing for your foliage-meter (which I love btw), now here I am again thanks to Google.
Thanks for making me giggle this Friday, 4 hours from quitting time!
I agreed with you
[...] CSS PNG Image Fix for IE Komodomedia – modified CSS snippet replace PNG images with their AlphaImageLoader equivalent (tags: webdesign) [...]
[...] an alpha-transparent PNG, which as you know, doesn’t display correctly unless you use an IE alpha image loader filter, which as you know doesn’t play nicely with background image positions. With this method, you [...]
I can see how annoyed you are with IE 6 or IE browsers. How I wish also that all browsers follow the same standard so that we, developers will no longer worry about cross-browser compatibility issues. Anyway, is there any way to exclude the transparent regions of png images from the clickable area?
This solution cause a runtime error because the server will no found url none for backgroundImage … this solution will generate many errors in your server log.
Very nice hack, thanks! :)
Hey,
hmm in the css you use, where could be use the “this.runtimeStyle.background-position-y” width -10px??
by removing the old background image, you remove also the old background position, that’s why…
Your Foliage-o-meter is q-u-a-l-i-t-y.
That is all.
This works wonders, thanks. I hate having to use hacks for IE, but that’s just the way it goes. Since the W3C still reports that IE6 has a 25% market share as of August, I can’t let go of designing for it yet.
Thanks again!
I also laughed histerically at your introduction, i even wondered if i was the only one whom has seen your hansolo impersonation ? Shhhhh only us nerds will see it ; )
Nice work too man your type of thinking keeps us web legends alive …..
Kane
Could just use png8 with alpha transparency. Will save lots of meaningless code, and whilst ie will get ugly gif like transparencies, at least the image will have a transparency.
To make it work just change the type in fireworks to png8, change the transparency type to alpha and export as png.
Sure beats making hacks.
The example page is flaming, but my PNGGIF solution is the only one I know of that: Works with JS disabled + no momentary flicker in IE + easily works with background images, even those which are tiled or at a custom non-top-left position: http://demo.pixelsandpages.com/php-tests/images/test.html
Lots of designers use the background: tag to place all of our background properties. This code snippet works really great, but would love to see it modified to also work with:
background: somecolor url(somelink.png) 0 0 my-reapt-setting;
repeat*
damn typos
Estupendo, me funciona muy bien.
Gracias.
Is it possible to use this like so:
I tried doing that b/c I want to use the png in a background hover state.
thanks!
Any script execution at the Style Sheet stack of the browser is a performance issue and more importantly a security threat so the use of IE expressions should not be encouraged. It’s a non-standard approach that does not comply with W3C directives.
Good news is Microsoft is ending expressions in Internet Explorer as announced on Thursday earlier this week. Indeed a very nice move towards the standard-compliant browser.
The particular PNG fix should exclusively be targeted to IE6 only.
‘IE6 is a bag of smashed buttholes’
very well said :) and thanks for the info’
i tried using it as background image but it is not working. any solutions
Woohoo!
Finally after trying several hacks this one works…
The other ones did work but not in my menu. And your solution did it…
Praise the lord!
doesn’t word
I dont know if it has been mentioned, but this hack did not work for me in IE unless a DOCTYPE was specified.
great hack, thanks!
Ah – this is great, thank you. I’ve been working a lot with Unit interactive’s PNG fix which (javascript based) has been perfect for 90% of my needs … however, it wouldn’t work with an AJAX script I had developed (or rather, I couldn’t get it to work), so this CSS version is just the ticket – thank you so much!!
Hi,
I have problem with links in absolutely positioned div. I need Drag n drop menu with links but the linsk are not clickable.
Transparent.gif is ok, having all .png a{position: relative; cursor: pointer;}
I was tested z-index and some other solutions but its not functional in IE6.
Anz ideas?
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes – examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm
You are freeaking awesome… I’ve tried all and nothing worked all the time.. this seems to work great!
Let’s all work together to fight corruptions in Papua New Guinea and also minimise criminal activities such as rape, stealing and many many more.
Kind regards,
Leo Maino Aopo (Y-Saka) Mekeo
Ph(D) +675 – 7193 7831
Works very well in IE6!
Хм… даже такое бывает.
дрОчь какой-то…
блин, пиво хочется.. кто-то хочет пиво с рыбкой?
New to this, so forgive me for the naivete: tried the fix you suggest and it obliterated my page in IE7. As in, my background color and background image repeat along the bottom remained intact. Everything else? Done. Gone. Nowhere to be seen. But the background image slice (a png) looked damn good. Although, IE7 doesn’t really have an issue with it anyway. Did I link the css file incorrectly? I just copied and pasted it from your code up top (with corrected directory path, of course). Any advice?
It works but not perfectly, image is coming with white border and a no image is coming too..
anyway thanx for the hack great one…
Hey sorry I dint get the transparent.gif image, sorry its working fine ……………..
Thanks
didn’t work for me in IE 6
nice try though.
ok, got it to work.
however, my linked images are clickable.
any suggestions?
thanks
there is really no need for all this code.
THE ABSOLUTE FIX:
Use PNG 32 format
Apply the STYLE=
“filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sProperties)” … > to your div either directly or in CSS external file for ie.
TO MAKE LINKS CLICKABLE INSIDE DIV:
if you are using the above style on a div and there are links in that div, the links wont work. The Fix: the child div MUST have a position defined and the surrounding div CANNOT!
Follow these easy instructions and it works perfect – no need for fancy fixes!
If you know how to use conditional statements, it makes everything validate!!!
[...] png support for IE6. Like so many others, in the past I’ve used the TwinHelix solution. Rogie has his solution, Alan Hogan has his server side solution, and there are a million variations on these. Although the [...]
Cool thanks