PDA

Click to See Complete Forum and Search --> : IE displays button backgrounds in orange

christech
10-11-2007, 09:32 AM
I am working on a site in dreamweaver and the navigation buttons backgrounds, that should be transparent are displayed in orange in IE (6.0). The buttons appear just fine in firefox and netscape. I used fireworks mx to create the .gif images for the up and over rollover. Any one have any ideas what is going on here. The HTML is as follows;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Locke Kennels Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style7 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFFFF;
}
.style8 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
color: #FFFFFF;
}
.style13 {
font-size: 60px;
color: #FF0000;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->

</style>

</head>

<body background="../../media/jpegs/lk%20bk%20320%20256%204.jpg" vlink="#FF0000" alink="#FF0000" onLoad="MM_preloadImages('nav locke kennels 1_r2_c2_f3.gif','nav locke kennels 1_r2_c2_f2.gif','nav locke kennels 1_r2_c2_f4.gif','nav locke kennels 1_r2_c4_f3.gif','nav locke kennels 1_r2_c4_f2.gif','nav locke kennels 1_r2_c4_f4.gif','../../media/5 locke kennels bt_f2.png','../../media/5 locke kennels eb_f2.png')">



<table width="600" border="10" align="center" cellspacing="5" bordercolor="#000000" bordercolorlight="#333333" bgcolor="#000000">
<tr>
<td width="75%" height="200" bordercolor="#FFFFFF" bgcolor="#000000"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="200">
<param name="movie" value="../../media/flash/5 locke kennels red blink fs4.swf">
<param name="quality" value="high">
<embed src="../../media/flash/5 locke kennels red blink fs4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="200"></embed>
</object>
</div></td>
</tr>
</table><p>&nbsp;</p>

<p align="center"><a href="../bostonterriers/boston terriers index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','../../media/5 locke kennels bt_f2.png',1)"><img src="../../media/5 locke kennels bt.png" name="Image3" width="182" height="78" border="0" ></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','../../media/5 locke kennels bt_f2.png',1)"></a> <a href="../english bulldogs/english bulldogs index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','../../media/5 locke kennels eb_f2.png',1)"><img src="../../media/5 locke kennels eb.png" name="Image2" width="182" height="78" border="0"></a></p>
<p align="center">
<table width="550" height="400" border="10" align="center" cellpadding="25" bordercolor="#000000" bordercolorlight="#333333">
<tr>
<td align="center" valign="top" bordercolor="#333333" bgcolor="#000000"><p align="center"></p>
<p align="left"><span class="style7">Locke Kennels has been breeding and</span><span class="style7"><span class="style7"> training dogs for more than 30 years.</span></p>
<p align="left" class="style7">We have a selective breeding progam,that brings conformation and quality. </p>
<p align="left" class="style7">Our stock is undeniably the Best of the Best </p>

<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="125" title="locke kennels ">
<param name="movie" value="../../media/flash/locke kennels banner.swf">
<param name="quality" value="high">
<embed src="../../media/flash/locke kennels banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="125"></embed>
</object>
</p>
<p align="center"><span class="style8">Tx; 296 779 6979</span></p>
<p align="center" class="style8">lockekennels@hotmail.com </p></td>
</tr>
</table>

</body>
</html>
scragar
10-11-2007, 10:20 AM
the forum has handy little tags that look like:
and please use them. After that's done I'll have a look over the code :P
christech
10-11-2007, 11:09 AM
I hope this is the correct way to apply these tags.





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Locke Kennels Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
.style7 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 24px;
color: #FFFFFF;
}
.style8 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 36px;
color: #FFFFFF;
}
.style13 {
font-size: 60px;
color: #FF0000;
font-weight: bold;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
-->

</style>

</head>

<body background="../../media/jpegs/lk%20bk%20320%20256%204.jpg" vlink="#FF0000" alink="#FF0000" onLoad="MM_preloadImages('nav locke kennels 1_r2_c2_f3.gif','nav locke kennels 1_r2_c2_f2.gif','nav locke kennels 1_r2_c2_f4.gif','nav locke kennels 1_r2_c4_f3.gif','nav locke kennels 1_r2_c4_f2.gif','nav locke kennels 1_r2_c4_f4.gif','../../media/5 locke kennels bt_f2.png','../../media/5 locke kennels eb_f2.png')">



<table width="600" border="10" align="center" cellspacing="5" bordercolor="#000000" bordercolorlight="#333333" bgcolor="#000000">
<tr>
<td width="75%" height="200" bordercolor="#FFFFFF" bgcolor="#000000"><div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="600" height="200">
<param name="movie" value="../../media/flash/5 locke kennels red blink fs4.swf">
<param name="quality" value="high">
<embed src="../../media/flash/5 locke kennels red blink fs4.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="600" height="200"></embed>
</object>
</div></td>
</tr>
</table><p>&nbsp;</p>

<p align="center"><a href="../bostonterriers/boston terriers index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','../../media/5 locke kennels bt_f2.png',1)"><img src="../../media/5 locke kennels bt.png" name="Image3" width="182" height="78" border="0" ></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','../../media/5 locke kennels bt_f2.png',1)"></a> <a href="../english bulldogs/english bulldogs index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','../../media/5 locke kennels eb_f2.png',1)"><img src="../../media/5 locke kennels eb.png" name="Image2" width="182" height="78" border="0"></a></p>
<p align="center">
<table width="550" height="400" border="10" align="center" cellpadding="25" bordercolor="#000000" bordercolorlight="#333333">
<tr>
<td align="center" valign="top" bordercolor="#333333" bgcolor="#000000"><p align="center"></p>
<p align="left"><span class="style7">Locke Kennels has been breeding and</span><span class="style7"><span class="style7"> training dogs for more than 30 years.</span></p>
<p align="left" class="style7">We have a selective breeding progam,that brings conformation and quality. </p>
<p align="left" class="style7">Our stock is undeniably the Best of the Best </p>

<p align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="400" height="125" title="locke kennels ">
<param name="movie" value="../../media/flash/locke kennels banner.swf">
<param name="quality" value="high">
<embed src="../../media/flash/locke kennels banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="400" height="125"></embed>
</object>
</p>
<p align="center"><span class="style8">Tx; 296 779 6979</span></p>
<p align="center" class="style8">lockekennels@hotmail.com </p></td>
</tr>
</table>

</body>
</html>
scragar
10-11-2007, 11:37 AM
IE has always had problems with PNGs, first it was permitting them, then colour loss and even now transparency. I'd recommend converting them to gifs or something that IE was actually bothers to support. there are many techniques designed to fix IE(IE making a div display inline, then set it's height etc to the images and set the image as the background, and similary hacks)
christech
10-11-2007, 02:34 PM
that worked.The PNG images caused the IE browser problem. Thanks