PDA

View Full Version : Odd PNG Problem... (Please help!)



knuckleball
Mar 24th, 2009, 06:03 AM
For the past few days, I've been pulling my hair out, trying to make at least one IE6 PNG hack to work successfully, for a website I've been building for a class.

Unfortunately, none of them have been working out for me. On all of my other websites, I used the hack developed by Twin Helix and it would work flawlessly. For some reason, it did nothing for this website.

The only hack I've had any degree of success with is one developed by Drew Diller. It almost completely works, except that I end up with several images repeating for no reason. This is across tags - <img> and <li> are both included.

I've tried to define the width and height of the affected images, but nothing has worked. Here's a screen shot of the problem I'm having, taken through NetRenderer (I'm on a Mac).

http://www.knuckleballdesign.com/images/screenshot.png

So far, the hack has only been applied to my front page, which can be viewed at http://www.knuckleballdesign.com.

Thanks for any help you can offer,
Adam

The following is the XHTML (CSS and Javascript in the next post).

XHTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Knuckleball Design</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<link href="iestyle.css" rel="stylesheet" type="text/css" />
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('img, li, div, h2');
</script>
<![endif]-->
<link href="images/favicon.ico" rel="shortcut icon" />
<script type="text/javascript" src="preload.js"></script>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>

</head>

<body>
<div id="container">
<div id="banner">
<a href="index.html"><img src="images/bannerlogo.png" alt="Knuckleball Design" /></a>
</div>
<!-- BEGIN CONTENT AREA -->
<div id="contentcontainer">
<div id="content">
<img class="header" src="images/header.png" alt="Who we are" style="padding-bottom:15px; width:492px; height:65px;" />
<p>Thank you for your interest in Knuckleball Design!</p>
<p>We are a new web development firm, devoted to serving our clients with both warmth and professionalism. We limit the number of clients we work with simultaneously, so that we can afford you the attention you deserve.</p>
<p>At Knuckleball Design, we pride ourselves on our sleek, modern design ethic and our commitment to efficient, standards-based code. (Don't worry - even if none of that made sense to you, we promise that you will be satisfied with our work!)</p>
<p>Please take a look around our website and, if you have any questions, <a href="contact.html">contact us</a>.</p>
</div>
</div>
<!-- END CONTENT AREA -->

<!-- BEGIN FOOTER -->
<div class="footer">
<div id="footer1">
<h2 class="contact"><img class="header2" src="images/contactinformation.png" alt="Contact Information" /></h2>
<p>722 Grandview Ave.<br />
P.O. Box 2203<br />
Saint John, NB E2L-3V1<br />
<strong>P</strong>: (902) 402.6469<br />
<strong>F</strong>: (506) 634.0713<br />
<a href="mailto:[email protected]">[email protected]</a></p>
<p>&copy; 2009 Knuckleball Design<br />
</p>
</div>
<div id="footer2">
<h2 class="also" style="background-image: url(images/alsoicon.png); background-position right center; background-repeat:no-repeat;"><img class="header2" src="images/alsoon.png" alt="We're Also On" /></h2>
<ul class="footer">
<li class="footer"><a href="http://www.twitter.com/knuckledesign"><img src="images/twitter.png" alt="Follow us on Twitter" /></a></li>
<li class="footer"><a href="http://www.facebook.com/pages/Saint-John-NB/Knuckleball-Design/73618421648"><img src="images/facebook.png" alt="Be a fan on Facebook" /></a></li>
</ul>
<h2 class="tweet"><img class="header2" src="images/latesttweet.png" alt="Latest Tweet" /></h2>
<div id="twitter_div"><p id="twitter_update_list" style="list-style-type:none;"></p></div><script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script><script type="text/javascript" src="http://twitter.com/statuses/user_timeline/knuckledesign.json?callback=twitterCallback2&amp;count=1"></script>
</div>
<div id="footer3">
<h2 class="obsession"><img class="header2" src="images/obsessions.png" alt="Our Favourite Obsession" /></h2>
<p>Right now, we're all very much in love with the new Joss Whedon series <span style="font-style:italic;">Dollhouse</span>. It has everything the modern geek could want! <a href="http://www.fox.com/dollhouse">Get more information on it here!</a></p>
<h2 class="information"><img class="header2" src="images/moreinformation.png" alt="More Information" /></h2>
<p><a href="sources.html">Sources</a> | <a href="privacypolicy.html">Privacy Policy</a><br />
<a href="index.html">About</a> | <a href="news.html">News</a> | <a href="services.html">Services</a> | <a href="portfolio.html">Portfolio</a> | <a href="team.html">Team</a> | <a href="contact.html">Contact</a></p>
</div>
</div>
<!-- END FOOTER -->

<!-- BEGIN SIDEABAR -->
<div class="sidebar">
<ul class="menu">
<li class="menu"><a href="index.html"><img src="images/about2.png" alt="About" onmouseover="src='images/about2.png'" onmouseout="src='images/about2.png'" /></a></li>
<li class="menu"><a href="news.html"><img src="images/news1.png" alt="News" onmouseover="src='images/news2.png'" onmouseout="src='images/news1.png'" /></a></li>
<li class="menu"><a href="services.html"><img src="images/services1.png" alt="Services" onmouseover="src='images/services2.png'" onmouseout="src='images/services1.png'" /></a></li>
<li class="menu"><a href="portfolio.html"><img src="images/portfolio1.png" alt="Portfolio" onmouseover="src='images/portfolio2.png'" onmouseout="src='images/portfolio1.png'" /></a></li>
<li class="menu"><a href="team.html"><img src="images/team1.png" alt="Team" onmouseover="src='images/team2.png'" onmouseout="src='images/team1.png'" /></a></li>
<li class="menu"><a href="contact.html"><img src="images/contact1.png" alt="Contact" onmouseover="src='images/contact2.png'" onmouseout="src='images/contact1.png'" /></a></li>
</ul>
</div>
<!-- END SIDEBAR -->

</div>
</body>
</html>

knuckleball
Mar 24th, 2009, 06:04 AM
CSS


/* BASIC STYLES */

body {
background-color: #dbd9cb;
background-image: url(images/backgroundie.png);
background-repeat: repeat-x;
color: white;
font: 10pt/25px Tahoma, "Trebuchet MS", Verdana, Arial, sans-serif;
margin-top: 0px;
}

img {
border: none;
}

em {
font-style: italic;
font-weight:normal;
}

strong {
font-weight:bold;
}

a:link {
color: #bfcc27;
text-decoration: none;
}

a:visited {
color: #922758;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

a:active {
text-decoration: none;
}

.footer a:link {
color: #56574b;
text-decoration: none;
}

.footer a:visited {
color: #56574b;
text-decoration: none;
}

.footer a:hover {
text-decoration: underline;
}

.footer a:active {
text-decoration: none;
}

/* LAYOUT STYLE */

div#container {
width: 1005px;
margin-right: auto;
margin-left: auto;
margin-bottom: 20px;
position: relative;
}

div#banner {
margin-top: 2px;
padding-top: 3px;
width: 900px;
}

div#contentcontainer {
width: 600px;
height: 500px;
float: left;
background: url(images/contentbackground.png) no-repeat;
margin-top:5px;
}

div#content {
width: 590px;
height: 460px;
padding-left: 27px;
padding-top: 35px;
overflow: auto;
}

div.sidebar {
width: 322px;
height: 550px;
background-image: url(images/sidebar.png);
background-repeat: no-repeat;
position: absolute;
left: 685px;
right: 0px;
top: 62px;
overflow: hidden;
}

div.footer {
width: 1005px;
color: #000;
padding-top: 30px;
margin-left: 27px;
clear: both;
font-size: 80%;
line-height: 20px;
}

div#footer1 {
width: 30%;
float: left;
margin-bottom: 25px;
}

div#footer2 {
width: 30%;
float: left;
padding-left: 35px;
}

div#footer3 {
float: left;
width: 30%;
padding-left: 37px;
}

/* RANDOM STYLES */

ul.menu {
padding-left: 25px;
margin-top: 50px;
list-style-type: none;
}

li.menu {
background-image: url(images/menubullet.png);
background-repeat: no-repeat;
padding-left: 40px;
padding-bottom: 25px;
}

img.header {
display:block;
margin-bottom:20px;
}

img.header2 {
padding-bottom: 3px;
}

h2.newsdate {
font-size: 75%;
font-weight: bold;
text-transform:uppercase;
text-align: right;
border-bottom: 1px dotted #fff;
}

h2.news {
font-size: 115%;
font-weight: bold;
margin-top: 2px;
}

h2.contact {
border-bottom: 1px dotted #000;
padding-top: 5px;
margin-bottom: 0px;
background: url(images/contacticon.png) no-repeat right center;
}

h2.also {
border-bottom: 1px dotted #000;
padding-top: 5px;
margin-bottom: 0px;
background: url(images/alsoicon.png) no-repeat right center;
}
h2.tweet {
border-bottom: 1px dotted #000;
padding-top: 5px;
margin-bottom: 0px;
background: url(images/tweeticon.png) no-repeat right center;
}
h2.obsession {
border-bottom: 1px dotted #000;
padding-top: 5px;
margin-bottom: 0px;
background: url(images/obsessionicon.png) no-repeat right center;
}
h2.information {
border-bottom: 1px dotted #000;
padding-top: 5px;
margin-bottom: 0px;
background: url(images/informationicon.png) no-repeat right center;
}

ul.footer {
list-style-type: none;
padding-left:10px;
}

li.footer {
display: inline;
padding-right: 5px;
}


img.also {
padding-right: 10px;
padding-top: 10px;
}

table.contact {
width: 350px;
margin-left: auto;
margin-right: auto;
}

td.left {
text-align: right;
padding-bottom: 10px;
}

td.right {
padding-left: 10px;
padding-bottom: 10px;
}

div.team {
border-bottom: 1px dotted #fff;
}

ul.portfolio {
padding-top: 5px;
padding-left: 20px;
}

li.portfolio {
display: inline;
list-style-type: none;
}

span.name {
font-size: 115%;
font-weight: bold;
}

/* LIGHTBOX */

#lightbox {
position: absolute;
left: 0;
top: 15px;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox img {
width: auto;
height: auto;
}

#lightbox a img {
border: none;
}

#outerImageContainer {
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer {
padding: 10px;
}

#loading {
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}

#hoverNav {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}

#imageContainer>#hoverNav {
left: 0;
}

#hoverNav a {
outline: none;
}

#prevLink, #nextLink {
width: 49%;
height: 100%;
background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block;
}

#prevLink {
left: 0;
float: left;
}

#nextLink {
right: 0;
float: right;
}

#prevLink:hover, #prevLink:visited:hover {
background: url(images/prevlabel.gif) left 15% no-repeat;
}

#nextLink:hover, #nextLink:visited:hover {
background: url(images/nextlabel.gif) right 15% no-repeat;
}

#imageDataContainer {
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100% ;
}

#imageData {
padding:0 10px;
color: #666;
}

#imageData #imageDetails {
width: 70%;
float: left;
text-align: left;
}

#imageData #caption {
font-weight: bold;
}
#imageData #numberDisplay {
display: block;
clear: left;
padding-bottom: 1.0em;
}

#imageData #bottomNavClose {
width: 66px;
float: right;
padding-bottom: 0.7em;
outline: none;
}

#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}


Javascript


/**
* DD_belatedPNG: Adds IE6 support: PNG images for CSS background-image and HTML <IMG/>.
* Author: Drew Diller
* Email: [email protected]
* URL: http://www.dillerdesign.com/experiment/DD_belatedPNG/
* Version: 0.0.7a
* Licensed under the MIT License: http://dillerdesign.com/experiment/DD_belatedPNG/#license
*
* Example usage:
* DD_belatedPNG.fix('.png_bg'); // argument is a CSS selector
* DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
**/

/*
PLEASE READ:
Absolutely everything in this script is SILLY. I know this. IE's rendering of certain pixels doesn't make sense, so neither does this code!
*/

var DD_belatedPNG = {

ns: 'DD_belatedPNG',
imgSize: {},

createVmlNameSpace: function() { /* enable VML */
if (document.namespaces && !document.namespaces[this.ns]) {
document.namespaces.add(this.ns, 'urn:schemas-microsoft-com:vml');
}
if (window.attachEvent) {
window.attachEvent('onbeforeunload', function() {
DD_belatedPNG = null;
});
}
},

createVmlStyleSheet: function() { /* style VML, enable behaviors */
/*
Just in case lots of other developers have added
lots of other stylesheets using document.createStyleSheet
and hit the 31-limit mark, let's not use that method!
further reading: http://msdn.microsoft.com/en-us/library/ms531194(VS.85).aspx
*/
var style = document.createElement('style');
document.documentElement.firstChild.insertBefore(style, document.documentElement.firstChild.firstChild);
var styleSheet = style.styleSheet;
styleSheet.addRule(this.ns + '\\:*', '{behavior:url(#default#VML)}');
styleSheet.addRule(this.ns + '\\:shape', 'position:absolute;');
styleSheet.addRule('img.' + this.ns + '_sizeFinder', 'behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;'); /* large negative top value for avoiding vertical scrollbars for large images, suggested by James O'Brien, http://www.thanatopsic.org/hendrik/ */
this.styleSheet = styleSheet;
},

readPropertyChange: function() {
var el = event.srcElement;
if (event.propertyName.search('background') != -1 || event.propertyName.search('border') != -1) {
DD_belatedPNG.applyVML(el);
}
if (event.propertyName == 'style.display') {
var display = (el.currentStyle.display == 'none') ? 'none' : 'block';
for (var v in el.vml) {
el.vml[v].shape.style.display = display;
}
}
if (event.propertyName.search('filter') != -1) {
DD_belatedPNG.vmlOpacity(el);
}
},

vmlOpacity: function(el) {
if (el.currentStyle.filter.search('lpha') != -1) {
var trans = el.currentStyle.filter;
trans = parseInt(trans.substring(trans.lastIndexOf('=')+1, trans.lastIndexOf(')')), 10)/100;
el.vml.color.shape.style.filter = el.currentStyle.filter; /* complete guesswork */
el.vml.image.fill.opacity = trans; /* complete guesswork */
}
},

handlePseudoHover: function(el) {
setTimeout(function() { /* wouldn't work as intended without setTimeout */
DD_belatedPNG.applyVML(el);
}, 1);
},

/**
* This is the method to use in a document.
* @param {String} selector - REQUIRED - a CSS selector, such as '#doc .container'
**/
fix: function(selector) {
var selectors = selector.split(','); /* multiple selectors supported, no need for multiple calls to this anymore */
for (var i=0; i<selectors.length; i++) {
this.styleSheet.addRule(selectors[i], 'behavior:expression(DD_belatedPNG.fixPng(this))'); /* seems to execute the function without adding it to the stylesheet - interesting... */
}
},

applyVML: function(el) {
el.runtimeStyle.cssText = '';
this.vmlFill(el);
this.vmlOffsets(el);
this.vmlOpacity(el);
if (el.isImg) {
this.copyImageBorders(el);
}
},

attachHandlers: function(el) {
var self = this;
var handlers = {resize: 'vmlOffsets', move: 'vmlOffsets'};
if (el.nodeName == 'A') {
var moreForAs = {mouseleave: 'handlePseudoHover', mouseenter: 'handlePseudoHover', focus: 'handlePseudoHover', blur: 'handlePseudoHover'};
for (var a in moreForAs) {
handlers[a] = moreForAs[a];
}
}
for (var h in handlers) {
el.attachEvent('on' + h, function() {
self[handlers[h]](el);
});
}
el.attachEvent('onpropertychange', this.readPropertyChange);
},

giveLayout: function(el) {
el.style.zoom = 1;
if (el.currentStyle.position == 'static') {
el.style.position = 'relative';
}
},

copyImageBorders: function(el) {
var styles = {'borderStyle':true, 'borderWidth':true, 'borderColor':true};
for (var s in styles) {
el.vml.color.shape.style[s] = el.currentStyle[s];
}
},

vmlFill: function(el) {
if (!el.currentStyle) {
return;
} else {
var elStyle = el.currentStyle;
}
for (var v in el.vml) {
el.vml[v].shape.style.zIndex = elStyle.zIndex;
}
el.runtimeStyle.backgroundColor = '';
el.runtimeStyle.backgroundImage = '';
var noColor = (elStyle.backgroundColor == 'transparent');
var noImg = true;
if (elStyle.backgroundImage != 'none' || el.isImg) {
if (!el.isImg) {
el.vmlBg = elStyle.backgroundImage;
el.vmlBg = el.vmlBg.substr(5, el.vmlBg.lastIndexOf('")')-5);
}
else {
el.vmlBg = el.src;
}
var lib = this;
if (!lib.imgSize[el.vmlBg]) { /* determine size of loaded image */
var img = document.createElement('img');
lib.imgSize[el.vmlBg] = img;
img.className = lib.ns + '_sizeFinder';
img.runtimeStyle.cssText = 'behavior:none; position:absolute; left:-10000px; top:-10000px; border:none;'; /* make sure to set behavior to none to prevent accidental matching of the helper elements! */
img.attachEvent('onload', function() {
this.width = this.offsetWidth; /* weird cache-busting requirement! */
this.height = this.offsetHeight;
lib.vmlOffsets(el);
});
img.src = el.vmlBg;
img.removeAttribute('width');
img.removeAttribute('height');
document.body.insertBefore(img, document.body.firstChild);
}
el.vml.image.fill.src = el.vmlBg;
noImg = false;
}
el.vml.image.fill.on = !noImg;
el.vml.image.fill.color = 'none';
el.vml.color.shape.style.backgroundColor = elStyle.backgroundColor;
el.runtimeStyle.backgroundImage = 'none';
el.runtimeStyle.backgroundColor = 'transparent';
},

/* IE can't figure out what do when the offsetLeft and the clientLeft add up to 1, and the VML ends up getting fuzzy... so we have to push/enlarge things by 1 pixel and then clip off the excess */
vmlOffsets: function(el) {
var thisStyle = el.currentStyle;
var size = {'W':el.clientWidth+1, 'H':el.clientHeight+1, 'w':this.imgSize[el.vmlBg].width, 'h':this.imgSize[el.vmlBg].height, 'L':el.offsetLeft, 'T':el.offsetTop, 'bLW':el.clientLeft, 'bTW':el.clientTop};
var fudge = (size.L + size.bLW == 1) ? 1 : 0;

/* vml shape, left, top, width, height, origin */
var makeVisible = function(vml, l, t, w, h, o) {
vml.coordsize = w+','+h;
vml.coordorigin = o+','+o;
vml.path = 'm0,0l'+w+',0l'+w+','+h+'l0,'+h+' xe';
vml.style.width = w + 'px';
vml.style.height = h + 'px';
vml.style.left = l + 'px';
vml.style.top = t + 'px';
};
makeVisible(el.vml.color.shape, (size.L + (el.isImg ? 0 : size.bLW)), (size.T + (el.isImg ? 0 : size.bTW)), (size.W-1), (size.H-1), 0);
makeVisible(el.vml.image.shape, (size.L + size.bLW), (size.T + size.bTW), (size.W), (size.H), 1);

var bg = {'X':0, 'Y':0};
var figurePercentage = function(axis, position) {
var fraction = true;
switch(position) {
case 'left':
case 'top':
bg[axis] = 0;
break;
case 'center':
bg[axis] = .5;
break;
case 'right':
case 'bottom':
bg[axis] = 1;
break;
default:
if (position.search('%') != -1) {
bg[axis] = parseInt(position)*.01;
}
else {
fraction = false;
}
}
var horz = (axis == 'X');
bg[axis] = Math.ceil(fraction ? ( (size[horz?'W': 'H'] * bg[axis]) - (size[horz?'w': 'h'] * bg[axis]) ) : parseInt(position));
if (bg[axis] == 0) {
bg[axis]++;
}
};
for (var b in bg) {
figurePercentage(b, thisStyle['backgroundPosition'+b]);
}

el.vml.image.fill.position = (bg.X/size.W) + ',' + (bg.Y/size.H);

var bgR = thisStyle.backgroundRepeat;
var dC = {'T':1, 'R':size.W+fudge, 'B':size.H, 'L':1+fudge}; /* these are defaults for repeat of any kind */
var altC = { 'X': {'b1': 'L', 'b2': 'R', 'd': 'W'}, 'Y': {'b1': 'T', 'b2': 'B', 'd': 'H'} };
if (bgR != 'repeat') {
var c = {'T':(bg.Y), 'R':(bg.X+size.w), 'B':(bg.Y+size.h), 'L':(bg.X)}; /* these are defaults for no-repeat - clips down to the image location */
if (bgR.search('repeat-') != -1) { /* now let's revert to dC for repeat-x or repeat-y */
var v = bgR.split('repeat-')[1].toUpperCase();
c[altC[v].b1] = 1;
c[altC[v].b2] = size[altC[v].d];
}
if (c.B > size.H) {
c.B = size.H;
}
el.vml.image.shape.style.clip = 'rect('+c.T+'px '+(c.R+fudge)+'px '+c.B+'px '+(c.L+fudge)+'px)';
}
else {
el.vml.image.shape.style.clip = 'rect('+dC.T+'px '+dC.R+'px '+dC.B+'px '+dC.L+'px)';
}
},

fixPng: function(el) {
el.style.behavior = 'none';
if (el.nodeName == 'BODY' || el.nodeName == 'TD' || el.nodeName == 'TR') { /* elements not supported yet */
return;
}
el.isImg = false;
if (el.nodeName == 'IMG') {
if(el.src.toLowerCase().search(/\.png$/) != -1) {
el.isImg = true;
el.style.visibility = 'hidden';
}
else {
return;
}
}
else if (el.currentStyle.backgroundImage.toLowerCase().search('.png') == -1) {
return;
}
var lib = DD_belatedPNG;
el.vml = {color: {}, image: {}};
var els = {shape: {}, fill: {}};
for (var r in el.vml) {
for (var e in els) {
var nodeStr = lib.ns + ':' + e;
el.vml[r][e] = document.createElement(nodeStr);
}
el.vml[r].shape.stroked = false;
el.vml[r].shape.appendChild(el.vml[r].fill);
el.parentNode.insertBefore(el.vml[r].shape, el);
}
el.vml.image.shape.fillcolor = 'none'; /* Don't show blank white shapeangle when waiting for image to load. */
el.vml.image.fill.type = 'tile'; /* Ze magic!! Makes image show up. */
el.vml.color.fill.on = false; /* Actually going to apply vml element's style.backgroundColor, so hide the whiteness. */

lib.attachHandlers(el);

lib.giveLayout(el);
lib.giveLayout(el.offsetParent);

/* set up element */
lib.applyVML(el);
}

};
try {
document.execCommand("BackgroundImageCache", false, true); /* TredoSoft Multiple IE doesn't like this, so try{} it */
} catch(r) {}
DD_belatedPNG.createVmlNameSpace();
DD_belatedPNG.createVmlStyleSheet();

knuckleball
Mar 25th, 2009, 12:42 AM
Anybody?

Alternatively, if you could recommend a better PNG solution that would work for this website, I'd be happy to hear it.

Fisher
Mar 25th, 2009, 04:10 AM
It's probably just me, but I don't go out of my way to use transparent PNGs unless your really need to. IE6 does have support for PNG 8's with transparency though. I use them all the time if I'm on a white background. If on a colour background, I'd prefer to put that colour into the PNG rather than apply a Javascript hack.

Here's a quick 10-minute redo of your site with no Javascript at all. (In fact, I accidentally took out the preloader too. oops)

http://mytestingsite.info/knuckle.html

With a bit more care, you could match your site identically. (I didn't keep the gradient in the black bar).

It also loads a heck of a lot faster than yours, even on my crappy test server. :)

knuckleball
Mar 25th, 2009, 07:06 AM
Thanks for your reply!

I was actually able to contact the developer of the PNG hack I was using, and was shown a way to work around that bug that I encountered.

I'll definitely keep your advice in mind, Fisher. Though they definitely slow down load time, I do like the freedom that the 24-bit PNGs allow. Working with a gradient background and a transparent image tends go a bit smoother for me with 24-bit PNG, mostly because I oftentimes like to change my mind on positioning.

Again, thank for your response!