...

View Full Version : PNG Transparency in IE6



TMRChris
01-16-2009, 02:27 PM
Hello once again,

There is a big wide problem that with IE6, PNG images display this horrible grey or white background when it's transparent.

It looks ugly, but I can't seem to find a way to solve it. I've searched on google and copied scripts, inserted them in to the document I wish for the png to be completely transparent but it's still not working.

I would normally just leave it, but as I want the site to look professional and the transparent png is essential to the data being displayed, I've been trying to find solutions to it.

I realise that most users have upgraded to IE 7 / IE 8 which supports transparent png images but there's got to be a small percentage of users who use IE6. I can't just say "sorry you'll have to upgrade your browser to view the data properly" obviously, so I'm trying to find solutions.

I've tried using spacer.gif but that doesnt work (but it does when on table designed pages), so I found some scripts:


<!–[if gte IE 5]>
<style type="text/css">
div.flower {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’flower.png’ ,sizingMethod=’crop’);
}
</style>
<![endif]–>


#png-holder {
width: 300px;
height: 150px;
text-indent: -9999px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/transparent.png', sizingMethod='crop');
}

They work but only show a grey background when viewed in IE6 (http://www.maybrick.co.uk/ie6.jpg).

Can any of you offer some help, maybe i'm going wrong somewhere?

abduraooft
01-16-2009, 02:57 PM
Can any of you offer some help, maybe i'm going wrong somewhere? Could you post a link to your page(or a sample one)?

TMRChris
01-21-2009, 10:27 AM
Hey, sorry for the long awaited reply. Testing page is active here (http://www.maybrick.co.uk/header1.html).

Many thanks if you can help. I really appreciate it.

abduraooft
01-21-2009, 10:38 AM
http://www.maybrick.co.uk/tmr/mixstats.php gives an error now, unable to see your #png-holder element.

TMRChris
01-21-2009, 07:24 PM
Yes, unfortunately the shoutcast company i'm with at the moment are having issues with getting the servers up and running hence the warning thing.

This is the code I have on the stats doc though:

<html>

<head>
<style>
#png-holder {
width: 518px;
height: 60px;
text-indent: -9999px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='transparent.png', sizingMethod='crop');
}</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>The Mix Radio Radio Now Playing Data</title><body background="transparent.png" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background-color: transparent tracingsrc="transparent.png" tracingopacity="100">
<font color="#FFFFFF"><?php

abduraooft
01-22-2009, 08:01 AM
But where is your element having id="png-holder" ?

ubh
01-22-2009, 08:10 AM
Hi TMRChris,
I wrote up a nice little tutorial on how to fix PNG 24 images in IE6+ and is very light weight you might want to take a look.

http://www.devinrolsen.com/tutorials/javascript/png24_ie_fix/index.php

I hope this helps.

TMRChris
01-23-2009, 04:46 PM
Hi TMRChris,
I wrote up a nice little tutorial on how to fix PNG 24 images in IE6+ and is very light weight you might want to take a look.

http://www.devinrolsen.com/tutorials/javascript/png24_ie_fix/index.php

I hope this helps.

The tutorial is great and explains in-depth, however I still can't get it to work. Of course it works fine in Firefox as it always has done, except it's just IE6.

Lol, this is oh so very annoying.

itsallkizza
01-23-2009, 04:55 PM
Personally I use a <1kb flash swf that loads in the PNG, grabs it's width/height and resizes it's stage to match.

Essentially with a couple lines of JS and a tiny tiny swf you can reduce the number of people who fail to view your PNG properly from IE6 users down to the 2% that don't have flash installed.

ubh
01-24-2009, 01:28 AM
The tutorial is great and explains in-depth, however I still can't get it to work. Of course it works fine in Firefox as it always has done, except it's just IE6.

Lol, this is oh so very annoying.

Hola TMRChris,


I see that you are using iframes to pull the three pages into the three different areas in the header.

mixstats.php
newstest.html
ticker.html

The white you see showing up is the three areas of your header are from the three different pages you are pulling in with the use of an iframe. See that white areas are really the three documents backgrounds... there is no way to remove a documents basic white background only change it to another color or image with IE and I am surprised it even worked in FF.

Now do lose hope cause the first file you are pulling in is a .php file so this tells me your web server supports this server side language. Ditch the iframes and use php a "include" to pull these three files content into your header. See this way you are not creating a window to these three images and their white backgrounds but rather are pulling in the content alone into your header areas.

See if you use a php include you wont even have to use a png file to achieve transparency.

Once you are pulling in the content via php include make sure to move the ticker script you have located in ticker.html over to header1.html to make the ticker still work.

TMRChris
01-25-2009, 02:52 AM
Hola TMRChris,


I see that you are using iframes to pull the three pages into the three different areas in the header.

mixstats.php
newstest.html
ticker.html

The white you see showing up is the three areas of your header are from the three different pages you are pulling in with the use of an iframe. See that white areas are really the three documents backgrounds... there is no way to remove a documents basic white background only change it to another color or image with IE and I am surprised it even worked in FF.

Now do lose hope cause the first file you are pulling in is a .php file so this tells me your web server supports this server side language. Ditch the iframes and use php a "include" to pull these three files content into your header. See this way you are not creating a window to these three images and their white backgrounds but rather are pulling in the content alone into your header areas.

See if you use a php include you wont even have to use a png file to achieve transparency.

Once you are pulling in the content via php include make sure to move the ticker script you have located in ticker.html over to header1.html to make the ticker still work.

Thanks for your help.
Okay, I followed your instructions and re-uploaded header1.html to my server, but it's not displaying the php include files in FF or IE. :confused:

I can't move the ticker file into the header1 file as it'll stop the script existing to change the image of the background from working.

My server does support php but I think it's limited, as I've tried shoutcast stats on there and they don't work at all; INI file not working or something.

ubh
01-25-2009, 04:32 AM
Hi TMRChris,

If this is what you are trying to achive:
http://www.devinrolsen.com/help/TMR/header1.php

then download what I put together here:
http://www.devinrolsen.com/help/TMR/TMRBanner.rar

else
ask away :)

TMRChris
01-25-2009, 05:08 PM
Hi TMRChris,

If this is what you are trying to achive:
http://www.devinrolsen.com/help/TMR/header1.php

then download what I put together here:
http://www.devinrolsen.com/help/TMR/TMRBanner.rar

else
ask away :)

That is what I am trying to achieve. You couldn't be more spot on.
Except. 2 problems have occured:

1: There is a script that is meant to be active on header1 whereby the tmrdefault and tmrnight images alternate at 6am & 6pm GMT respectively. I notice you haven't included that, would it take much to do it at all?

2: The "Next news is at.." doesnt appear (unless you didn't include it).

Is there anyway past that?

Thanks a bunch though. That is spot on bar them 2 problems.

Looks like my server doesn't like php include :(: www.themixradio.co.uk/header1.php

TMRChris
01-30-2009, 03:11 PM
I decided to edit the php file myself, and made a few changes.
However, I have a problem with my image script :(


<style type="text/css">
body {margin:0px; background-color:#000066;}
#spanTicker {
font-weight:bold;
font-color:#FFFFFF;
width:518px;
position:absolute;
text-align:left;
text-overflow:clip;
overflow:hidden;
white-space:nowrap;
top: 127px;
left: 279px;
height: 15px;
}
#mixStats {
position:absolute;
width:518px;
left: 279px;
top: 46px;
}
body,td,th {
font-size: 13px;
color: #000000;
}
</style>
<script type="text/javascript">
function setImage()
{
var el = document.getElementById('dynimg'); // this gets the id of the image
var defaultimageurl = 'tmrdefault.jpg'; // this is the default image
var nightimageurl = 'tmrnight.jpg'; // this is the night time image
var currentTime = new Date();
var hour = currentTime.getHours(); // gets the hour of the user's system
if(hour >= 6 && hour < 18) // if hour is 6am 06:00 or past it and before 6pm 18:00
{
el.setAttribute('src',defaultimageurl);
}
else if(hour >= 18 || hour < 6) // if hour is past 6pm 18:00, is 6pm or before 6am 06:00
{
el.setAttribute('src',nightimageurl);
}
}
window.onload = setImage;
</script>
</head>

<body>
<IMG SRC="tmrdefault.jpg" ALT="" name="dynimg" WIDTH=969 HEIGHT=168 border="0" id="dynimg">
<div id="spanTicker"><?php
include("http://www.maybrick.co.uk/tmr/ticker.php");
?></div>
<div id="mixStats">
<?php
include("http://www.maybrick.co.uk/tmr/mixstats.php");
?>
</div>

</div>
</body>

The above is what the document header1.php (http://www.maybrick.co.uk/tmr/header1.php) looks like, everything works fine except for the change image script which won't change the image at 18.00 GMT.

This normally happens if there is another script in the existing document, but there isn't as I have removed the script(s). So can anyone help me find a resolution to my issue?

Many Thanks

TMRChris
02-09-2009, 12:59 PM
I decided to edit the php file myself, and made a few changes.
However, I have a problem with my image script :(


<style type="text/css">
body {margin:0px; background-color:#000066;}
#spanTicker {
font-weight:bold;
font-color:#FFFFFF;
width:518px;
position:absolute;
text-align:left;
text-overflow:clip;
overflow:hidden;
white-space:nowrap;
top: 127px;
left: 279px;
height: 15px;
}
#mixStats {
position:absolute;
width:518px;
left: 279px;
top: 46px;
}
body,td,th {
font-size: 13px;
color: #000000;
}
</style>
<script type="text/javascript">
function setImage()
{
var el = document.getElementById('dynimg'); // this gets the id of the image
var defaultimageurl = 'tmrdefault.jpg'; // this is the default image
var nightimageurl = 'tmrnight.jpg'; // this is the night time image
var currentTime = new Date();
var hour = currentTime.getHours(); // gets the hour of the user's system
if(hour >= 6 && hour < 18) // if hour is 6am 06:00 or past it and before 6pm 18:00
{
el.setAttribute('src',defaultimageurl);
}
else if(hour >= 18 || hour < 6) // if hour is past 6pm 18:00, is 6pm or before 6am 06:00
{
el.setAttribute('src',nightimageurl);
}
}
window.onload = setImage;
</script>
</head>

<body>
<IMG SRC="tmrdefault.jpg" ALT="" name="dynimg" WIDTH=969 HEIGHT=168 border="0" id="dynimg">
<div id="spanTicker"><?php
include("http://www.maybrick.co.uk/tmr/ticker.php");
?></div>
<div id="mixStats">
<?php
include("http://www.maybrick.co.uk/tmr/mixstats.php");
?>
</div>

</div>
</body>

The above is what the document header1.php (http://www.maybrick.co.uk/tmr/header1.php) looks like, everything works fine except for the change image script which won't change the image at 18.00 GMT.

This normally happens if there is another script in the existing document, but there isn't as I have removed the script(s). So can anyone help me find a resolution to my issue?

Many Thanks

Prior to my last post, I still can't get it to work. I've edited it, made a separate JS file for the "dynimg" file and it still won't work, not even if I remove the ticker.

Please, can somebody offer some sort of advice on how to resolve this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum