Click to See Complete Forum and Search --> : Ie6?
chalsema
07-13-2007, 01:44 PM
Does anyone have IE6? I'm trying to get png transparency to work on one of my sites, but I don't have IE6 to test it on. I've managed to test it on IE7, Firefox for Windows and Mac, and Safari. It's really bare-bones right now, but I don't really want to go any further until I can get this to work. Basically, the red "links" on the left side should have a transparent background so the gray background shows behind them. Here's the url (be sure to take the spaces out - I didn't want it hyperlinking):
http:// www. queenbeemarketing.com/ SupplySite/index.html
Thanks!
John G
07-13-2007, 02:00 PM
IE6 doesn't display transparency. The only transparency it employs is either "on" or "off" like a .gif or a .png 8-bit (which will be the only kind of transparency you can achieve with a png in IE6).
chalsema
07-13-2007, 02:20 PM
Hmmm I'm pretty sure they were png-8's before, but just in case I resaved them as that. I had found a "fix" online that I thought would make this all work... but I'm wondering if I need to find another solution. Here's where I found the info: http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
resdog
07-13-2007, 03:47 PM
actually, I've been using this code in the <head> section and it works to solve the transparency problem in IE6:
<!--[if lt IE 7]>
<script language="JavaScript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 & 6.
{
var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters))
{
for(var i=0; i<document.images.length; i++)
{
var img = document.images[i]
var imgName = img.src.toUpperCase()
if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
{
var imgID = (img.id) ? "id='" + img.id + "' " : ""
var imgClass = (img.className) ? "class='" + img.className + "' " : ""
var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
var imgStyle = "display:inline-block;" + img.style.cssText
if (img.align == "left") imgStyle = "float:left;" + imgStyle
if (img.align == "right") imgStyle = "float:right;" + imgStyle
if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
var strNewHTML = "<span " + imgID + imgClass + imgTitle
+ " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
+ "filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader"
+ "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
img.outerHTML = strNewHTML
i = i-1
}
}
}
}
window.attachEvent("onload", correctPNG);
</script>
<![endif]-->
So you can use 16-bit transparent png's, with drop shadows, and the like. For a sample of it, go here:
http://www.1000trails.com/pages/rvkit/index.htm
and for the same page, without the code:
http://www.1000trails.com/pages/rvkit/indexnon.htm
The png image is the one on the top right, the key with the "RV for Sale" sign. It has a drop shadow and transparency, and it shows correctly in IE6.
chalsema
07-13-2007, 04:18 PM
Cool, thanks Res. How did you get your image to save as 16-bit? When I "save for web" in photoshop it makes me choose between 8 and 24... And 8-bit quality isn't so hot...
p.s. I just found this Web site: http://ipinfo.info/netrenderer/ it lets you see a screenshot of your site in IE6. Looks like I have both solutions working (yours, and the one I found before).
chalsema
07-13-2007, 05:25 PM
Cool, thanks Res. How did you get your image to save as 16-bit? When I "save for web" in photoshop it makes me choose between 8 and 24... And 8-bit quality isn't so hot...
Nevermind... duh... I found it. :o
chalsema
07-13-2007, 05:36 PM
Hmmm according to this: http://ipinfo.info/netrenderer/
16-bit isn't working...
katgal
07-15-2007, 07:51 PM
Try iepngfix (http://www.twinhelix.com/css/iepngfix/). I use it on quite a few sites and it works perfectly in most cases.
All you need to do is upload the iepngfix.htc file and a blank.gif and insert * { behavior: url(iepngfix.htc) } into your stylesheet. (This will apply the behavior to every tag across the site. You can, however, be selective, replacing the * with the elements you want to affect. BUT the only way to use it on background images is to use the universal *)
You can also put it in a second stylesheet called with conditional comments so it only gets pulled from your server when someone with ie6 loads the page. IE 7
Some limitations:
If you have a background position specified in your css, it will throw your design out of whack. But usually you can design around that issuue.
Supposedly doesn't work on tiled background images. Only displays the tiled image once.Here's one site (http://www.bkbdesigngroup.com/michelangelo/) I used it on. My web server's on the blink, so if you get an error... sorry! Seems to be intermittently up and down this morning.
And absolutely use IE NetRenderer (http://ipinfo.info/netrenderer/index.php) to get screen shots of your site in various versions of IE. Great tool.