IE 6 PNG Problem

Discussion in 'HTML & Website Design' started by WonderDesigner, Dec 11, 2009.

0
  1. #1
    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
    [​IMG]

    Here is my page code till now
    <!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>
    Code (markup):
    Here is my stylesheet 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;
}
    Code (markup):

    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
     

    Attached Files:

    • ie6.jpg
      ie6.jpg
      File size:
      89 KB
      Views:
      125
    WonderDesigner, Dec 11, 2009 IP
  2. Dondon2d

    Dondon2d Peon

    Messages:
    3,193
    Likes Received:
    146
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Check your blankImg variable if it points to the imagefile correctly. Usually, problems occur with relative linking.
     
    Dondon2d, Dec 11, 2009 IP
  3. hash4272

    hash4272 Peon

    Messages:
    7
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    why dont you use simple jpg or gif format of images i dont think you have many images that you will need to convert if you have the psd saved then you can just save images as jpg its better then going through the problems, and installing IE PNG Fix 2.0 Alpha 4 by TwinHelix is a hassle also, better fix is to change format of your images
     
    hash4272, Dec 11, 2009 IP