www.webdeveloper.com
Results 1 to 10 of 10

Thread: PNG header not working correctly

  1. #1
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383

    PNG header not working correctly

    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?!
    "Problems cannot be solved by the same level of thinking that created them.

  2. #2
    Join Date
    Aug 2006
    Posts
    34
    because you're viewing your page in IE. this has been discussed before, PNG-24's don't hold their transparency in IE!

  3. #3
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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.
    Last edited by toicontien; 11-29-2006 at 04:40 PM. Reason: Corrected misspelling

  4. #4
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    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?
    "Problems cannot be solved by the same level of thinking that created them.

  5. #5
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,773
    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?

  6. #6
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    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..
    "Problems cannot be solved by the same level of thinking that created them.

  7. #7
    Join Date
    Feb 2005
    Posts
    1,018
    They have nothing in common. Post a link to where you have them both in action.
    If you can't handle the job then don't take the job or ask for help on it if you are getting paid for it.
    Web Developer's Handbook.::.Why Tables for Layout is Stupid?.::.Why I won't help you

  8. #8
    Join Date
    Jun 2006
    Location
    Boston, MA
    Posts
    383
    "Problems cannot be solved by the same level of thinking that created them.

  9. #9
    Join Date
    Feb 2005
    Posts
    1,018
    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>
    If you can't handle the job then don't take the job or ask for help on it if you are getting paid for it.
    Web Developer's Handbook.::.Why Tables for Layout is Stupid?.::.Why I won't help you

  10. #10
    Join Date
    Nov 2007
    Posts
    1

    Fix for using pngfix and swfobject

    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles