PNG header not working correctly

**absolutmgd13** · 10-20-2006, 01:20 PM

http://www.matthewdesmond.com/matthewdesmond/index.asp

the header images are PNG's(PNG-24)...made in photoshop with a transparent background...can anyone tell my why they have a background on them now?!

**jswoods** · 10-20-2006, 11:21 PM

because you're viewing your page in IE. this has been discussed before, PNG-24's don't hold their transparency in IE!

**toicontien** · 10-21-2006, 11:10 AM

The answer is yes and no, for Internet Explorer supporting alpha transparent PNGs. Here's a hack to get it to work:

Code:

/* This would be your normal CSS file, viewable by Internet Explorer and
 * non-IE browsers. */
#someDIV {
  background: transparent url(path/to/bg.png) repeat-y scroll 0 0;
}

The above code will get things to work for Gecko (Firefox, Mozilla, Netscape 7+, etc), KHTML (Safari, Omniweb, etc) and Trident (Internet Explorer 7 only) browsers. Gecko, KHTML and Trident are the three main browser rendering engines used today. To get alpha transparent PNGs to work with IE 5.5 and 6 (which use an older version of the Trident rendering engine), you need a little bit of, shall we say... coercion. Insert the following snippet of code into the HEAD of every HTML document in which you want 24-bit transparent PNGs:

HTML Code:

<!--[if IE]>
<style type="text/css" media="screen">
@import "/css/Fix_Internet_Explorer.css";
</style>
<![endif]-->

Now in the aptly named Fix_Internet_Explorer.css file:

Code:

/* IE7 does not support the star-html hack anymore, so this is ignored by IE7: */
* html #someDIV {
  background: transparent none;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='path/to/bg.png',sizingMethod='scale');
}

And that's it.

Also note that the URL in AlphaImageLoader(src='...') I've found to be relative to the HTML document that calls the style sheet, rather than relative to the stylesheet that has the filter: CSS property. Another snagging point is that Internet Explorer will shrink or crop the HTML element's boundries to fit the image loaded using the AlphaImageLoader. You can also cause the background image to stretch to the boundries of its containing HTML tag.

Here's more about the AlphImageLoader at the Microsoft Developers Network:
http://msdn.microsoft.com/library/de.../reference.asp

BTW absolutmgd13, I like your sig

Very fitting for this case.

**absolutmgd13** · 10-23-2006, 09:48 AM

thanks for your help..i searched right after i posted just thinking of it...heres my problem now..

this is in the <head>:

Code:

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

and i have a pngfix.js file...everything work awesome..but now it doesnt...this is after i added an include for my flash navigation...i have an active X fix for flash so you dont hav eto click to activate..but i dont see why the png fix isnt working now..comepletely different JS files on seperate pages! any ideas?

**toicontien** · 10-23-2006, 10:27 AM

Are you getting a javascript error? And I've never seen the defer attribute for SCRIPT tags before. If it's not working on different pages, perjaps the src for the PNG fix js file is incorrect on the other page? Could be because you use a relative URL for the pngfix.js file and the other page is located in a different directory on your server compared to the first page?

**absolutmgd13** · 10-23-2006, 12:14 PM

this is where i got the flash fix..
http://blog.deconcept.com/swfobject/

this is where i got the png fix...
http://homepage.ntlworld.com/bobosola/pnghowto.htm

im not really a JS person...but there was no error...each was workin fine by themselves untill i tried both..

**_Aerospace_Eng_** · 10-23-2006, 01:28 PM

They have nothing in common. Post a link to where you have them both in action.

**absolutmgd13** · 10-23-2006, 01:32 PM

http://www.matthewdesmond.com/matthewdesmond/index.asp

**_Aerospace_Eng_** · 10-23-2006, 02:35 PM

Try this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>. . : : Matthew Desmond :: Welcome : : . .</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
background:#000;
}
#container {
width:800px;
margin:auto;
background:url(images/middle.gif) 0 189px no-repeat;
}
#top {
background:url(images/top.gif) no-repeat;
height:57px;
line-height:0px;
font-size:0;
position:relative;
top:1px;
}
#content {
height:323px;
overflow:auto;
margin:0 90px 0 120px;
}
#bottom {
padding-top:42px;
background:url(images/bottomscratch.gif) no-repeat;
line-height:0px;
font-size:0;
}
#flashcontent {
height:132px;
line-height:0px;
font-size:0;
}
#flashcontent object {
display:block;
}
</style>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var so = new SWFObject("NAV.swf", "navigation", "800", "132", "7");
so.addParam('wmode','transparent');
window.onload = function()
{
	so.write("flashcontent");
}
</script>
</head>
<body>
<div id="container">
	<div id="top"></div>
	<div id="flashcontent"> This text is replaced by the Flash movie. </div>
	<div id="content"><img src="images/HDR_welcome.png" width="239" height="58" alt=""></div>
	<div id="bottom"><img src="images/bottom.gif" width="800" height="96" alt=""></div>
</div>
</body>
</html>

**kat000** · 11-30-2007, 05:49 AM

It's clearly some time after this initial post but in case people are still stuck with this problem here's the fix

http://maxtoroq.wordpress.com/2007/0...g-swfobjectjs/

Thread: PNG header not working correctly

Thread Tools

Display

PNG header not working correctly

Fix for using pngfix and swfobject

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions