Png transparency and ie6

June 18th, 2009

png transparency fix for ie6

So I downloaded a few of png’s to use in a site for a client.
The job was almost done and I had sent him a preview to look over, when a couple of issues came up. He said some of my graphics looked odd.
It was an ie6 situation, and to be honest I hadn’t tested back that far, but my luck the client was still using this old browser.
Ok so i thought i’d find a copy of ie6 and install it along side opera, firefox etc, but hey it can’t be done. (correct me if I am wrong on this), but newer versions overwrite older so this method of testing wasn’t possible. Anyway a google later I found Microsoft expression web, a way to test how your design will render in ie6 and ie7, only a preview version and soon to become obsolete on my system.
So checking previous sites a couple of problems came up, one easily sorted using display:inline to keep floated elements in check, the other being the ugly background appearing when an image should render with none. I found solutions all over, most worked a little, but were quirky,
Enter DD_belatedPNG by Drew Diller, I haven’t tested it extensively, but so far all is good.

So I just wanted to spread the word from my little corner.

The html

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
  /* EXAMPLE */
  DD_belatedPNG.fix('#logo, #strap, #header, #nav ');

  /* string argument can be any CSS selector */
  /* .png_bg example is unnecessary */
  /* change it to what suits you! */
</script>
<![endif]--> 

</head>

<body>

<div id="wrapper">
<div id="top">
<div id="logo"></div><div id="strap"></div>
</div>

<div id="nav"></div>

<div id="header">
<div id="header_title">
<h2>Welcome to My new site</h2>
</div>
</div>

So that’s it upload the javascript replace your divs or classes. Mine are all background on the style sheet.

The css


#header {
 width:940px;
 height:106px;
 margin-top:20px;
 background:transparent url(img/header_back1.1.png) no-repeat; }

#nav {
 height:52px;
 width:940px;
 background:transparent url(img/nav_back1.png) no-repeat; }

#logo {
 width:162px;
 height:106px;
 float:left;
 display:inline;
 background:transparent url(img/test.png) no-repeat;}

#strap {
 width:400px;
 height:33px;
 margin:60px 0 0 20px;
 float:left;
 display:inline;
 background:transparent url(img/print1.png) no-repeat; }

I used it as is and it worked a dream. Cheers..
Will be playing with it some more.
Till next time.. Bye

<< 0Previous

Next >>

Entry Filed under: Design, Webby

Leave a Comment

Required

Required, hidden

Related Posts from the Past:



Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Trackback this post  |  Subscribe to the comments via RSS Feed

Most Recent Posts