CSS PNG IE hack
- Started
- Last post
- 19 Responses
- dystopiapop
I'm trying to make IE (and other browsers without PNG support) load a different background image for a DIV using CSS. Does anyone know how to do this?
- spiralstarez0
#element {
background:url(image.jpg);
} /* for IE */html>body #element {
background:url(image2.jpg);
} /* mozilla and smart browsers read this tag, but IE can't */
- spiralstarez0
so yeah the PNG goes in the second declaration in that last example.
- dystopiapop0
sans the html> i assume
- Mick0
Putting an _ in front of any property will only be read by IE.
eg.
height=400;
height=_450;Don't think it validates though.
- Mojo0
IE supports PNGs, just not transparency.
Using this code you can load a PNG and show the transparency correctly:
I left my image url so you can cut, paste & test it.
You could make some simple javascript to detect browser and load appropriate code.
It is ridiclous, 8+ years or something we've been waiting for a simple update to IE to fix PNG support!
- Mojo0
- Mojo0
- dystopiapop0
Mojo, your code/link is blank, try again! Thanks
- dystopiapop0
got it thanks
- version30
i see it just fine mojo
- dystopiapop0
Mick, your solution doesn't work. CSS doesnt even use the 'is equal to' symbol to denote property specs
- dystopiapop0
None of these solutions work for me. I'm doing what I should have from the beginning: not use PNG. Stupid Microsoft.
- dystopiapop0
I rescind my last comment. spiralstarez's solution worked once i fixed a typo of my own. THANKS!
- spiralstarez0
that CSS code I gave works I'm sure of it. you can read more about how it works in this article:
http://www.sitepoint.com/article…
you don't take the 'html' part out of that code I gave
- spiralstarez0
beat me to it :-)
- spiralstarez0
You can also FIX png support for IE using a script, but it only goes back to IE5.5
- Mojo0
My code is a hack for IE that shows the image transparency in PNGs as it normally should do.
Link to example: http://www.replete.nu/hack.htm
JPG of hack working w/ source in IE:
It does work.
gg
- Mojo0
So like I said, if you want PNG support in current versions of IE you need to make a cgi/js script that:
1. detects browser
2. for FF/safari/opera etc insert
[img="(PNGurl)"]
3. for IE insert:
[DIV ID="oDiv" STYLE="osition:absolute; left:0px; height:30; width:439; filter:progid:DXImageTransform.M...
src='(PNGurl)', sizingMethod='scale');" >
[/DIV](PNGurl) is the variable which the URL is kept
You could write a really nice little script to do this. If someone does, paste it here.
x
- PhonyMcRingRing0
You could always take the PHP approach: