jimdeluxe
01-07-2009, 08:47 PM
Hi!
I am developing a web portfolio with most elements based on transparent png's. Since IE6 doesnt support these, I have looked around for the wide range of possible solutions for the problem. Based on my research, the most popular and serious solution seems to be sleight or even better supersleight. Unfortunately, they both seem to do absolutely nothing with my page. I have tried everything I can think of, but cant figure it out, if anyone knows what it could be please let me know, thank you!
This is the index page in which the transparency wont work:
<!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>I'm John Scott & I'm a(n) _ _ _ _ _ _ _ _ Designer</title>
<link rel="stylesheet" href="css/style.css" type="text/css" title="plain white" />
<script type="text/javascript" src="js/navigation.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" src="js/supersleight.js"></script>
<![endif]-->
</head>
<body>
<div id="frame">
<div id="main">
<div id="menu">
<table cellpadding="0" cellspacing="2">
<tr>
<td>
<img id="info_off" style="cursor:pointer; display:block" src="img/menu_information.png" onmouseover="info_rollover()" alt="Information" />
<a href="information.php">
<img id="info_on" style="cursor:pointer; display:none" src="img/menu_information_s.png" onmouseout="menu_restore()" alt="Information" />
</a>
</td>
<td>
<img id="identity_off" style="cursor:pointer; display:block; margin-left:11px" src="img/menu_identity.png" onmouseover="identity_rollover()" alt="Identity" />
<a href="identity.php">
<img id="identity_on" style="cursor:pointer; display:none; margin-left:11px" src="img/menu_identity_s.png" onmouseout="menu_restore()" alt="Identity" />
</a>
</td>
</tr>
<tr>
<td>
<img id="print_off" style="cursor:pointer; display:block" src="img/menu_print.png" onmouseover="print_rollover()" alt="Print" />
<a href="print.php">
<img id="print_on" style="cursor:pointer; display:none" src="img/menu_print_s.png" onmouseout="menu_restore()" alt="Print" />
</a>
</td>
<td>
<img id="webpage_off" style="cursor:pointer; display:block; margin-left:11px" src="img/menu_webpage.png" onmouseover="webpage_rollover()" alt="Web Page" />
<a href="webpage.php">
<img id="webpage_on" style="cursor:pointer; display:none; margin-left:11px" src="img/menu_webpage_s.png" onmouseout="menu_restore()" alt="Web Page" />
</a>
</td>
</tr>
</table>
</div>
<?php include('page/headlines.html'); ?>
<div id="content">
<div class="container_9"><img class="image_container9" src="img/index_content.jpg" alt="Small Container" /></div>
<div style="text-align:center;">
<div class="copytext">Optimized for FF3/IE7/S3.2 1024x768px or higher - Copyright John Scott, Sweden 2008</div>
<a href="http://validator.w3.org/check?uri=referer" target="_blank">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="18" width="48" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer" target="_blank">
<img style="border:0;width:48px;height:18px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
<br />
<a class="link2" href="sitemap.html">Sitemap</a>
</div>
</div>
<div id="back"></div>
<div id="right_menu">
<div id="title" style="background-image:url(img/title_welcome.jpg)"></div>
<br /><b>John Scott Design Portfolio</b><br />
Welcome to my design portfolio!<br />
Here I present selected works from my experience as a visual designer. If you are looking to hire me or want a price suggestion for your project, please contact me through email or phone. Thank you for visiting and I hope you enjoy my work!
<img src="img/index_signature.png" alt="Signature" />
<br /><br />
</div>
<div id="contact"><a class="link" href="mailto:contact@johnscott.se" target="_blank">contact@johnscott.se</a><br />+46 (0)739924104</div>
<a href="resume.pdf" target="_blank" style="cursor:pointer"><span id="pdf_link"></span></a>
</div>
</div>
</body>
</html>
This is the supersleight js-file, it is unaltered:
var supersleight = function() {
var root = false;
var applyPositioning = true;
// Path to a transparent GIF image
var shim = 'x.gif';
// RegExp to match above GIF image name
var shim_pattern = /x\.gif$/i;
var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
// background pngs
if ((obj.currentStyle.backgroundImage.match(/\.gif\"\)$/i) == null) && (obj.currentStyle.backgroundImage.match(/\.jpg\"\)$/i) == null) && (obj.currentStyle.backgroundImage.match(/\.jpeg\"\)$/i) == null) && (obj.currentStyle.backgroundImage != "none")) {
bg_fnFixPng(obj);
}
// image elements
if ((obj.tagName=='IMG' && obj.src.match(/\.gif$/i) == null) && (obj.tagName=='IMG' && obj.src.match(/\.jpg$/i) == null) && (obj.tagName=='IMG' && obj.src.match(/\.jpeg$/i) == null)){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};
var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};
var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='image')";
img.src = shim;
};
var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
return {
init: function() {
addLoadEvent(fnLoadPngs);
},
limitTo: function(el) {
root = el;
},
run: function() {
fnLoadPngs();
}
};
}();
// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();
I am developing a web portfolio with most elements based on transparent png's. Since IE6 doesnt support these, I have looked around for the wide range of possible solutions for the problem. Based on my research, the most popular and serious solution seems to be sleight or even better supersleight. Unfortunately, they both seem to do absolutely nothing with my page. I have tried everything I can think of, but cant figure it out, if anyone knows what it could be please let me know, thank you!
This is the index page in which the transparency wont work:
<!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>I'm John Scott & I'm a(n) _ _ _ _ _ _ _ _ Designer</title>
<link rel="stylesheet" href="css/style.css" type="text/css" title="plain white" />
<script type="text/javascript" src="js/navigation.js"></script>
<!--[if lte IE 6]>
<script type="text/javascript" src="js/supersleight.js"></script>
<![endif]-->
</head>
<body>
<div id="frame">
<div id="main">
<div id="menu">
<table cellpadding="0" cellspacing="2">
<tr>
<td>
<img id="info_off" style="cursor:pointer; display:block" src="img/menu_information.png" onmouseover="info_rollover()" alt="Information" />
<a href="information.php">
<img id="info_on" style="cursor:pointer; display:none" src="img/menu_information_s.png" onmouseout="menu_restore()" alt="Information" />
</a>
</td>
<td>
<img id="identity_off" style="cursor:pointer; display:block; margin-left:11px" src="img/menu_identity.png" onmouseover="identity_rollover()" alt="Identity" />
<a href="identity.php">
<img id="identity_on" style="cursor:pointer; display:none; margin-left:11px" src="img/menu_identity_s.png" onmouseout="menu_restore()" alt="Identity" />
</a>
</td>
</tr>
<tr>
<td>
<img id="print_off" style="cursor:pointer; display:block" src="img/menu_print.png" onmouseover="print_rollover()" alt="Print" />
<a href="print.php">
<img id="print_on" style="cursor:pointer; display:none" src="img/menu_print_s.png" onmouseout="menu_restore()" alt="Print" />
</a>
</td>
<td>
<img id="webpage_off" style="cursor:pointer; display:block; margin-left:11px" src="img/menu_webpage.png" onmouseover="webpage_rollover()" alt="Web Page" />
<a href="webpage.php">
<img id="webpage_on" style="cursor:pointer; display:none; margin-left:11px" src="img/menu_webpage_s.png" onmouseout="menu_restore()" alt="Web Page" />
</a>
</td>
</tr>
</table>
</div>
<?php include('page/headlines.html'); ?>
<div id="content">
<div class="container_9"><img class="image_container9" src="img/index_content.jpg" alt="Small Container" /></div>
<div style="text-align:center;">
<div class="copytext">Optimized for FF3/IE7/S3.2 1024x768px or higher - Copyright John Scott, Sweden 2008</div>
<a href="http://validator.w3.org/check?uri=referer" target="_blank">
<img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Transitional" height="18" width="48" />
</a>
<a href="http://jigsaw.w3.org/css-validator/check?uri=referer" target="_blank">
<img style="border:0;width:48px;height:18px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" />
</a>
<br />
<a class="link2" href="sitemap.html">Sitemap</a>
</div>
</div>
<div id="back"></div>
<div id="right_menu">
<div id="title" style="background-image:url(img/title_welcome.jpg)"></div>
<br /><b>John Scott Design Portfolio</b><br />
Welcome to my design portfolio!<br />
Here I present selected works from my experience as a visual designer. If you are looking to hire me or want a price suggestion for your project, please contact me through email or phone. Thank you for visiting and I hope you enjoy my work!
<img src="img/index_signature.png" alt="Signature" />
<br /><br />
</div>
<div id="contact"><a class="link" href="mailto:contact@johnscott.se" target="_blank">contact@johnscott.se</a><br />+46 (0)739924104</div>
<a href="resume.pdf" target="_blank" style="cursor:pointer"><span id="pdf_link"></span></a>
</div>
</div>
</body>
</html>
This is the supersleight js-file, it is unaltered:
var supersleight = function() {
var root = false;
var applyPositioning = true;
// Path to a transparent GIF image
var shim = 'x.gif';
// RegExp to match above GIF image name
var shim_pattern = /x\.gif$/i;
var fnLoadPngs = function() {
if (root) {
root = document.getElementById(root);
}else{
root = document;
}
for (var i = root.all.length - 1, obj = null; (obj = root.all[i]); i--) {
// background pngs
if ((obj.currentStyle.backgroundImage.match(/\.gif\"\)$/i) == null) && (obj.currentStyle.backgroundImage.match(/\.jpg\"\)$/i) == null) && (obj.currentStyle.backgroundImage.match(/\.jpeg\"\)$/i) == null) && (obj.currentStyle.backgroundImage != "none")) {
bg_fnFixPng(obj);
}
// image elements
if ((obj.tagName=='IMG' && obj.src.match(/\.gif$/i) == null) && (obj.tagName=='IMG' && obj.src.match(/\.jpg$/i) == null) && (obj.tagName=='IMG' && obj.src.match(/\.jpeg$/i) == null)){
el_fnFixPng(obj);
}
// apply position to 'active' elements
if (applyPositioning && (obj.tagName=='A' || obj.tagName=='INPUT') && obj.style.position === ''){
obj.style.position = 'relative';
}
}
};
var bg_fnFixPng = function(obj) {
var mode = 'scale';
var bg = obj.currentStyle.backgroundImage;
var src = bg.substring(5,bg.length-2);
if (obj.currentStyle.backgroundRepeat == 'no-repeat') {
mode = 'crop';
}
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + mode + "')";
obj.style.backgroundImage = 'url('+shim+')';
};
var el_fnFixPng = function(img) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='image')";
img.src = shim;
};
var addLoadEvent = function(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
};
}
};
return {
init: function() {
addLoadEvent(fnLoadPngs);
},
limitTo: function(el) {
root = el;
},
run: function() {
fnLoadPngs();
}
};
}();
// limit to part of the page ... pass an ID to limitTo:
// supersleight.limitTo('header');
supersleight.init();