Website Design Forum

**ScubyUK** · 08-28-2006, 08:32 AM

Hi there,

I'm having a problem with a Fireworks Menu and Internet Explorer

I have a fireworks png file containing a pop-up menu which I have successfully imported into my Dreamweaver page. The problem I have is that in Internet Exploder (6 and 7), my iFrame obscures the menu. It's fine in Firefox 1.5, Netscape 8 and Opera 9. Can anyone help me?

Thanks.

**LadynRed** · 08-28-2006, 10:11 AM

First, IE doesn't support transparent PNG's, so that could be part of the problem.
Second.. don't use iFrames.

Can you show us the code ?

**ScubyUK** · 08-30-2006, 02:39 AM

Hi,

Thanks for the reply. Here's the code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="XHTML namespace">
<head>
<title>Tribalwoods.co.za - Big and Small - We do them all!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="JavaScript1.2" type="text/javascript" src="mm_css_menu.js"></script>
<style type="text/css" media="screen">
@import url("./index.css");
</style>
<style>
/*set CSS for SPAN tag surrounding each image*/
.seqslidestyle{
margin-right: 100px;
}
</style>
</head>
<div id="FWTableContainer520899686">
<table border="0" cellpadding="0" cellspacing="0" width="800">

<tr>
<td><img src="images/spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="80" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="400" height="1" border="0" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
</tr>
<tr>
<td colspan="6"><img name="indexnew_r1_c1" src="images/indexnew_r1_c1.gif" width="800" height="160" border="0" id="indexnew_r1_c1" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="160" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="indexnew_r2_c1" src="images/indexnew_r2_c1.gif" width="80" height="25" border="0" id="indexnew_r2_c1" alt="" /></td>
<td rowspan="2"><img name="indexnew_r2_c2" src="images/indexnew_r2_c2.gif" width="80" height="425" border="0" id="indexnew_r2_c2" alt="" /></td>
<td><a href="javascript:;" onmouseout="MM_menuStartTimeout(500);" onmouseover="MM_menuShowMenu('MMMenuContainer08272 20443_0', 'MMMenu0827220443_0',0,25,'indexnew_r2_c3');"><img name="indexnew_r2_c3" src="images/indexnew_r2_c3.gif" width="80" height="25" border="0" id="indexnew_r2_c3" alt="" /></a></td>
<td><img name="indexnew_r2_c4" src="images/indexnew_r2_c4.gif" width="80" height="25" border="0" id="indexnew_r2_c4" alt="" /></td>
<td><img name="indexnew_r2_c5" src="images/indexnew_r2_c5.gif" width="80" height="25" border="0" id="indexnew_r2_c5" alt="" /></td>
<td rowspan="2"><img name="indexnew_r2_c6" src="images/indexnew_r2_c6.gif" width="400" height="425" border="0" id="indexnew_r2_c6" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="25" border="0" alt="" /></td>
</tr>
<tr>
<td><img name="indexnew_r3_c1" src="images/indexnew_r3_c1.gif" width="80" height="400" border="0" id="indexnew_r3_c1" alt="" /></td>
<td colspan="3"><img name="indexnew_r3_c3" src="images/indexnew_r3_c3.gif" width="240" height="400" border="0" id="indexnew_r3_c3" alt="" /></td>
<td><img src="images/spacer.gif" width="1" height="400" border="0" alt="" /></td>
</tr>
</table>
<div id="MMMenuContainer0827220443_0">
<div id="MMMenu0827220443_0" onmouseout="MM_menuStartTimeout(500);" onmouseover="MM_menuResetTimeout();">
<a href="javascript:;" id="MMMenu0827220443_0_Item_0" class="MMMIFVStyleMMMenu0827220443_0" onmouseover="MM_menuOverMenuItem('MMMenu0827220443 _0');">
Wendy Houses
</a>
<a href="javascript:;" id="MMMenu0827220443_0_Item_1" class="MMMIVStyleMMMenu0827220443_0" onmouseover="MM_menuOverMenuItem('MMMenu0827220443 _0');">
Dolls Houses
</a>
<a href="javascript:;" id="MMMenu0827220443_0_Item_2" class="MMMIVStyleMMMenu0827220443_0" onmouseover="MM_menuOverMenuItem('MMMenu0827220443 _0');">
Additions
</a>
<a href="javascript:;" id="MMMenu0827220443_0_Item_3" class="MMMIVStyleMMMenu0827220443_0" onmouseover="MM_menuOverMenuItem('MMMenu0827220443 _0');">
Garden Houses
</a>
<a href="javascript:;" id="MMMenu0827220443_0_Item_4" class="MMMIVStyleMMMenu0827220443_0" onmouseover="MM_menuOverMenuItem('MMMenu0827220443 _0');">
Sheds
</a>
</div>
</div>
</div>
</head>
<body onload="goforit()" bgcolor="#ffffff">
<div id="Layer1">
<iframe src="content/welcome.html" width="500" height="400" id="Main" scrolling="no" frameborder="0"></iframe >
</div>
<div id="Layer2">
<script type="text/javascript">
/***********************************************
* MultiFrame Image Slideshow script- Dynamic Drive DHTML code library (Dynamic Drive DHTML(dynamic html) & JavaScript code library)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at Dynamic Drive DHTML(dynamic html) & JavaScript code library for full source code
***********************************************/
var seqslides=new Array()
//Set Path to Image plus optional URL ("" for no URL):
seqslides[0]=["images/pic001.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
seqslides[1]=["images/pic002.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
seqslides[2]=["images/pic003.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
seqslides[3]=["images/pic004.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
seqslides[4]=["images/pic005.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
seqslides[5]=["images/pic006.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
seqslides[6]=["images/pic007.jpg", "Dynamic Drive DHTML(dynamic html) & JavaScript code library"]
//Set pause between each image display (2000=2 second):
var slidedelay=1000
//Set how many images to show at once (must be less than total # of images above):
var slidestoreveal=4
//Specify code to insert between each slide (ie: "<br>" to insert a line break and create a vertical layout)
//"" for none (or horizontal):
var slideseparater="<br>"
//Set optional link target to be added to all images with a link:
var optlinktarget="secwindow"
//Set image border width:
var imgborderwidth=0
//Set opacity value of each image when it's "dimmed", and when it's not, respectively (1=100% opaque/normal).
//Change 0.2 to 0 to completely hide image when it's dimmed:
var opacityvalues=[1,1]
///No need to edit beyond here///////////
function processimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'" style="filter:alpha(opacity='+(opacityvalues[0]*100)+');-moz-opacity:'+opacityvalues[0]+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}
var curslide=1 //var to track current slide (total: slidestoreveal)
var curimgindex=0 //var to track current image (total: seqslides.length)
var isfirstcycle=1 //boolean to indicate whether this is the first cycle
if (document.getElementById){
for (i=0;i<slidestoreveal;i++)
document.write('<span id="seqslide'+i+'" class="seqslidestyle">'+processimgcode(seqslides[i])+'</span>'+slideseparater)
curimgindex=slidestoreveal
illuminateslide(0,opacityvalues[1])
}
function illuminateslide(slideindex, amt){
var slideobj=document.getElementById("seqslide"+slidei ndex).getElementsByTagName("IMG")[0]
if (slideobj.filters)
slideobj.filters.alpha.opacity=amt*100
else if (slideobj.style.MozOpacity)
slideobj.style.MozOpacity=amt
}
function displayit(){
if (curslide<slidestoreveal){
if (!isfirstcycle)
changeimage(curslide)
illuminateslide(curslide, opacityvalues[1])
curslide++
}
else{
isfirstcycle=0
for (i=0;i<slidestoreveal;i++)
illuminateslide(i, opacityvalues[0])
changeimage(0)
illuminateslide(0, opacityvalues[1])
curslide=1
}
}
function changeimage(slideindex){
document.getElementById("seqslide"+slideindex).inn erHTML=processimgcode(seqslides[curimgindex])
curimgindex++
if (curimgindex>=seqslides.length)
curimgindex=0
}
if (document.getElementById)
setInterval("displayit()",slidedelay)

</script>
</div>
<div id="Layer3">
<script>
var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thu rsday","Friday","Saturday")
var montharray=new Array("January","February","March","April","May"," June","July","August","September","October","Novem ber","December")
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym<10)
daym="0"+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn="AM"
if (hours>=12)
dn="PM"
if (hours>12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+":"+seconds+" "+dn
+"</font></small>"
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&&!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval("getthedate()",1000)
}
</script>
<span id="clock"></span></div>

</body>
</html>

Thanks again for any help

Scuby