HTML Forum

**coogs** · 12-11-2009, 11:07 AM

Hi,

I am coding one PSD

everything is going fine...

now the thing is

i am using PNG images
and IE6 is seriously display those PNG's very badly

To fix this problem i am using
IE PNG Fix 2.0 Alpha 4 by TwinHelix

Which you can see here
http://www.twinhelix.com/css/iepngfix/

and the proper documentation how to use this is here
http://www.twinhelix.com/css/iepngfix/demo/

i followed everything and the problem is also solved but i am getting a
red color broken image icon above images

Here is the screenshot

Here is my page code till now

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img, div { behavior: url(iepngfix.htc) }
</style> 
</head>
<body>
<div id="main_container">
  <div id="logo"><img src="imges/logo.png" width="307" height="89" alt="Company" /></div>
  <div id="header">
    <div id="header_content1">We Create Wonders</div>
    <div id="header_content2">Lorem ipsum dolor sit amet, consectetur 
      adipiscing elit. Donec mattis aliquam risus. 
      Etiam posuere rhoncus tortor ac commodo. 
      Duis elit risus, porta eu laoreet quis, mollis</div>
    <div id="header_knowmore"><a href="#"><img src="imges/know-more-button.png" alt="Know More" width="96" height="24" border="0" /></a></div>
  </div>
  <div id="box_holder">
  <div id="login_box"></div>
  </div>
</div>
</div>
</body>
</html>

Here is my stylesheet code

Code:

body {
    background-image:url(imges/background.png);
    background-repeat:repeat-x;
    margin:0 auto;
    }



#main_container {
    margin:0 auto;    
    width:833px;

}

#header {
    background-image:url(imges/header.png);
    background-repeat:no-repeat;
    width:828px;
    height:314px;
    margin-top:20px;
}

#header_content1 {
    width:308px;
    height:44px;
    padding-top:86px;
    margin-left:24px;
    font-family:Kartika;
    font-size:42px;
    color:#cb1515;
    
    
}

#header_content2 {
    padding-top:15px;
    margin-left:74px;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size:16px;
    color:#cb1515;
    width:348px;
    height:77px;
    
}

#header_knowmore {
    width:96px;
    height:24px;
    margin-left:334px;
    margin-top:19px;
}

#box_holder {
    width:828px;
    height:267px;
}

#login_box {
    background-image:url(imges/login_box.png);
    background-repeat:no-repeat;
    width:199px;
    height:263px;
}

i think i inserted all the things properly according to the documentation of TwinHelix

or let me know if i am wrong

Please help me on this what should i do

**Brian07002** · 11:46 AM

I had the same problem with this, I would use a gif or jpg, forget about png transparency with that browser, unless you don't develop for ie 6 users.

**coogs** · 12-11-2009, 12:04 PM

But their is some reasons i can not use JPEG
Any more help please

**frih** · 01:52 PM

I got it, <div id="logo"><img src="imges/logo.png" width="307" height="89" alt="Company" /></div>

Check the IMAGES spelling in your code, it is imges not images. Change it.

**LadynRed** · 12-11-2009, 02:17 PM

You need to be sure that the blank.gif file that you need for the PNGFix to work is present and that you have the correct path to that blank image in the .htc file.

**webcosmo** · 12-11-2009, 11:13 PM

Most of the png fix makes the pages load really slow.

Sometimes I could solve this problem with png 8 if the image does not have alpha transparency. Have you tried that?

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!