...

View Full Version : Transparent PNG's in IE 6



NewWebDesigner
02-19-2009, 07:40 PM
I have been working on this all day and everything I do seems to lead me no where. I googled this and found many different ways to do this, yet I still cant seem to get it to work. So I know I am missing something somewhere. So I was hoping someone could help me out and point out what I am missing. Here is the 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" />
<!-- TemplateBeginEditable name="title" --><title>TransWorld Network</title> <!-- TemplateEndEditable -->
<link rel="shortcut icon" href="../favicon.ico">
<!--[if lte IE 6]>
<script type="text/javascript" src="supersleight-min.js"></script>
<![endif]-->
<style type="text/css">
<!--
body {
font: 8 pt Arial, Helvetica, sans-serif;
background: #F0F1EB;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
}
.twoColFixLtHdr #container {
width: 800px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
background: #FFFFFF;
margin: 0; /* the auto margins (in conjunction with a width) center the page */
border: 2px solid #BEC1AA;
position: absolute;
left: 100px;
margin-top: 25px;
z-index: 1;
}
.twoColFixLtHdr #header {
padding: 0; /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
font: 6pt;
position: absolute;
top: -13px;
left: 0px;
z-index: 2;
}
.twoColFixLtHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font: 6pt;
top: -35px;
}
.twoColFixLtHdr #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 357px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #EBEBEB; /* the background color will be displayed for the length of the content in the column, but no further */
padding: 15px 20px 15px 10px;
position: absolute;
left: 390px;
top: 148px;
height: 166px;
z-index: 3;
background-color: #FFFFFF;
}
.twoColFixLtHdr #mainContent {
margin: 0; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 45px 0px 20px 0px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
font: 10pt Veranda, Arial, Helvetica, sans-serif;
line-height: 17px;
}
.twoColFixLtHdr #footer {
padding: 5px 0 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#FFFFFF;
font-size: 4pt;
vertical-align: bottom;
border-top: solid #EDEEE8 1px;
}
.twoColFixLtHdr #footer p {
margin: 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
font-size: 4pt;
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
.headline {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
font-weight: bold;
color: #929871;
}
-->
</style>
<!--[if IE 5]>
<style type="SpryMenuBarHorizontal.css">
/* place css box model fixes for IE 5* in this conditional comment */
.twoColFixLtHdr #sidebar1 { width: 230px; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible {background-color: white;}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
.twoColFixLtHdr #sidebar1 { padding-top: 30px; }
.twoColFixLtHdr #mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->

<style type="text/css">
<!--
#apDiv1 {
position:absolute;
top:41px;
width:800px;
height:auto;
z-index:1000;
left: 29px;
}
-->
</style>
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv2 {
position:absolute;
width:362px;
height:18px;
z-index:2;
top: 148px;
left: -1px;
}
.style5 {font-size: 7pt}
.subheadline {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: italic;
color: #20345A;
}
#apDiv3 {
position:absolute;
width:339px;
height:231px;
z-index:1001;
left: 155px;
top: 265px;
}
.box {
height: 133px;
position: absolute;
left: 115px;
top: 451px;
width: 552px;
z-index: 5;
}
#apDiv4 { position:absolute;
width:361px;
height:213px;
z-index:1;
left: 3px;
top: 158px;
}
#swoosh {
height: 124px;
width: 793px;
position: absolute;
left: -407px;
top: 187px;
z-index: 4;
}
#apDiv5 {
position:absolute;
width:200px;
height:115px;
z-index:7;
top: 331px;
left: 0px;
}
.box1 {
height: 145px;
position: absolute;
left: 120px;
top: 449px;
width: 552px;
z-index: 8;
}
#apDiv6 {
position:absolute;
width:427px;
height:114px;
z-index:9;
left: 27px;
top: 403px;
padding-bottom: 20px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.style7 {font-size: 7pt; font-family: Verdana, Arial, Helvetica, sans-serif; }
#apDiv7 {
position:absolute;
width:793px;
height:32px;
z-index:1001;
top: 0px;
left: -41px;
}
-->
</style>
<script type="text/javascript" src="../vwd_scripts/curvy/vwd_curvycorners.js"></script>
<script type="text/javascript">
<!--
gCurvyCorners[0]="container,15,15,15,15,1,0";
//-->
</script>
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv8 {
position:absolute;
width:495px;
height:61px;
z-index:1;
left: 11px;
top: 79px;
}
-->
</style>
</head>

<body class="twoColFixLtHdr">
</div>
<div id="container">
<div id="header">
<h1><img src="../Top-banner-no-text.png" width="800" height="135" /></h1>
<div id="apDiv8">
<div id="apDiv7">
<div id="apDiv1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="../index.htm">Home</a></li>
<li><a class="MenuBarItemSubmenu" href="../history.html">About Us</a>
<ul>
<li><a href="../Promise.html"><span>Our Promise</span></a></li>
<li><a href="../history.html"><span>TWN History</span></a></li>
<li><a href="../careers.html"><span>Careers at TWN</span></a></li>
<li><a href="../news.html"><span>News at TWN</span></a></li>
<li><a href="../Contact.html"><span>Contact Us</span></a></li>
</ul>
</li>
<li><a href="../products.hmtl" class="MenuBarItemSubmenu">Products</a>
<ul>
<li><a href="../Wi-Power.html"><span>Wi-Power High-Speed Internet</span></a></li>
<li><a href="../VoIP.html"><span>Wi-Power Digital Phone</span></a></li>
<li><a href="../LongDistance.html"><span>Long Distance</span></a></li>
<li><a href="../dialup.html"><span>Dial-Up</span></a></li>
<li><a href="../audioweb.html"><span>Audio/Web Conferencing</span></a></li>
<li><a href="../CallingCard.html"><span>Calling Cards</span></a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu" href="../Partner.html">Partnership Program</a>
<ul>
<li><a href="../Partner.html"><span>Become a Partner</span></a> </li>
<li><a href="../Current.html"><span>Current Partners</span></a> </li>
<li><a href="../marketingandchannel.html"><span>Marketing and Channel Support</span></a> </li>
</ul>
</li>
<li class="MenuBarHorizontal"><a href="../techsupport.html" class="MenuBarItemSubmenu">Customer Support</a>
<ul>
<li><a href="../Contact.html"><span>Contact Us</span></a></li>
<li><a href="http://www.wi-power.com/faq.htm"><span>FAQs</span></a></li>
<li><a href="../techsupport.html"><span>Technical Support</span></a></li>
<li><a href="http://www.epowerc.com/ebill/twn/index.html"><span>View Your Bill</span></a></li>
<li><a href="../RequestaCall.html"><span>Request a Call</span></a></li>
<li><a href="../Moving.html"><span>Moving Service</span></a></li>
</ul>
</li>
<li><a href="../Contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<!-- end #header --></div>
<!-- TemplateBeginEditable name="body" -->
<div id="mainContent">
<h1>&nbsp;</h1>
<div id="apDiv2">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','361','height','216','wmode','transparent','...','...','movie' ,'../Home Page Images 2','quality','high' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="361" height="216">
<param name="movie" value="../Home Page Images 2.swf" />
<param name="quality" value="high" />
<param name="WMODE" value="transparent" />
<embed wmode="transparent" ...>
<embed src="../Home Page Images 2.swf" width="361" height="216" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
</noscript></div>
<h1>&nbsp;</h1>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p><br />

<div id="sidebar1">
<p align="justify">TransWorld Network, Corp. partners with our country’s rural electric cooperatives to provide communities with products such as high-speed Internet, dial-up Internet, long distance and calling card services. <br />
<br />
Our goal is to bring affordable, reliable communication solutions to areas that are currently underserved by technology. </p>
<div id="#swoosh"></div>
<!-- end #mainContent -->
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="apDiv5"><img src="../swoosh2.png" alt="" width="800" height="124" /></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="apDiv6"><img src="../boxes.jpg" width="545" height="110" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="387,38,431,54" href="http://www.epowerc.com/ebill/twn/index.html" />
<area shape="rect" coords="389,57,490,70" href="#" /><area shape="rect" coords="388,75,457,84" href="../contact.html" /><area shape="rect" coords="198,39,259,53" href="../history.html" />
<area shape="rect" coords="198,58,314,70" href="../current.html" />
<area shape="rect" coords="198,73,330,87" href="../partner.html" />
<area shape="rect" coords="6,37,166,53" href="../Wi-Power.html" /><area shape="rect" coords="6,57,137,70" href="../VoIP.html" /><area shape="rect" coords="7,76,89,88" href="../LongDistance.html" />
</map><br />
</div>
<p>&nbsp;</p>
<p><br />
</p>
</div>
<!-- TemplateEndEditable -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats -->
<div id="footer">
<ul id="MenuBar2" class="MenuBarHorizontal">
<li><a href="../index.htm"><span><span>Home</span></span></a> </li>
<li><a href="../sitemap.html"><span><span>Site Map</span></span></a></li>
<li><a href="../privacy.html"><span><span>Privacy Policy</span></span></a> </li>
<li><a href="../terms.html"><span><span>Terms and Conditions</span></span></a> </li>
<li><a href="../careers.html"><span><span class="style5">Careers</span></span></a></li>
<li><a href="../feedback.html"><span><span>Site Feed Back</span></span></a></li>
<li>
<div align="center"><a href="../tariffs.html"><span><span>Tariffs</span></span></a></div>
</li>
</ul>
</div>
<div align="center"><span class="style7">Copyright 2002-2009</span> </div>
<!-- end #container --></div>

<p>&nbsp;</p>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp; </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript">
<!--
var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>


Here is the javascript for the code


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(/\.png/i) !== null) {
bg_fnFixPng(obj);
}
// image elements
if (obj.tagName=='IMG' && obj.src.match(/\.png$/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='scale')";
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 following the directions as of right now from this article if that helps

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Thank you for your help in advance I am starting to go stir crazy over here...

gnomeontherun
02-20-2009, 11:20 AM
Try removing all of the Spry stuff, maybe it is conflicting with it? I found a little info that might suggest that, but nothing definitive.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum