Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts

    PNG Transparency in IE6

    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:

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

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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)?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Hey, sorry for the long awaited reply. Testing page is active here.

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

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    http://www.maybrick.co.uk/tmr/mixstats.php gives an error now, unable to see your #png-holder element.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    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:
    Code:
    <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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    But where is your element having id="png-holder" ?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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..._fix/index.php

    I hope this helps.

  • Users who have thanked ubh for this post:

    TMRChris (01-25-2009)

  • #8
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ubh View Post
    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..._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.

  • #9
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #10
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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.

  • Users who have thanked ubh for this post:

    TMRChris (01-25-2009)

  • #11
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ubh View Post
    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.

    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.

  • #12
    ubh
    ubh is offline
    Regular Coder ubh's Avatar
    Join Date
    Apr 2008
    Location
    Portland, Oregon U.S.A.
    Posts
    443
    Thanks
    108
    Thanked 15 Times in 14 Posts
    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

  • Users who have thanked ubh for this post:

    TMRChris (01-25-2009)

  • #13
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ubh View Post
    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
    Last edited by TMRChris; 01-25-2009 at 04:39 PM.

  • #14
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    I decided to edit the php file myself, and made a few changes.
    However, I have a problem with my image script

    Code:
    <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 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

  • #15
    New Coder
    Join Date
    Aug 2008
    Posts
    32
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by TMRChris View Post
    I decided to edit the php file myself, and made a few changes.
    However, I have a problem with my image script

    Code:
    <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 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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •