macromedia flash sitedesign: Hi,

I'm not sure what exactly is causing this issue but if anyone may have an
idea, please help me out. I've always created my web pages in IE and then
TRIED to make the proper changes so that Netscape worked with them. This was
always a daunting task and took almost 2x's as much time to do this than it did
creating the pages. However, just the other day I came accross someone's tip
that said web developers should always design/test in Netscape and then adjust
the pages afterward to work for IE, mainly because IE doesn't follow the proper
standards according to those by the W3C (CSS especially). Let me tell you,
this procedure worked PERFECTLY! So I'd also like to spread the word for those
who don't follow this practice.

My Issue:

I'm currently redoing a website I made last year. It's called "My Wish List"
and basically, it allows people to create a wishlist of things they'd wish to
receive for certain holidays. Then, they can have their friends and family
members sign in to the "visitor's" section to view their wishes, leave
messages, and write them an email message.

The newest version I'm working on now will have a few Flash movies embedded as
well as being cross platform compatible (IE and Netscape so far). One of my
movies is a menu located at the bottom of the page, much like Windows has their
task bar, start button, etc. If you test the movie in IE, it works perfectly.
However, in Netscape 7.2, when you place the cursor over the links in the menu,
the highligted effect flutters and it also doesn't highlight the text when you
move the cursor over each item. For example, if you place your cursor over
each links, there is supposed to be a gradient background appear behind the
text. In IE, it works fine. In Netscape, if you place the cursor over the
bottom links, the top links' gradient background flashes/flutters randomly
however the background on the text you wish to highlight doesn't appear at all.
Also, if you place the cursor over the top links in the menu, nothing happens
at all. If anyone has any suggestions, please let me know.

To test my movie out, please go
http://mywishlist.dyndns.org:8080/beta/mainmenuBU.cfm

My SWF settings:

SWF created in Flash MX (version 6, not 2004)
OS version: Windows XP Pro. SP2
Browser's tested on: IE6 SP2, Netscape 7.2
Flash Player Plugin Version (IE/NN): 7/7


<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.ca
b#version=6,0,0,0"
WIDTH="185"
HEIGHT="330"
id="FlashMenu"
ALIGN="">
<PARAM NAME=movie VALUE="FlashMenu.swf">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=best>
<PARAM NAME=scale VALUE=noscale>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="FlashMenu.swf"
loop=false
menu=false
quality=best
scale=noscale
wmode=transparent
bgcolor=#FFFFFF
WIDTH="185"
HEIGHT="330"
NAME="FlashMenu"
ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>

I noticed also that when the menu is fading in or out, the gradient background
doesn't flicker. It still isn't where it should be though.

Try taking out the wmode attribute. I know from experience that IE and
Netscape/Mozilla apply the tranparent window mode differently and perhaps this
is a side effect.

Thank you jameslyon for the quick reply.

I have a little more information I figured out after I posted that:

okay, I just tested the
http://mywishlist.dyndns.org:8080/beta/flashmenu/FlashMenu.html (<-- click me)
Flash MX generated, in a separate Netscape window and guess what...it works
perfectly. I have a feeling this is my problem, though, I don't know exactly
how to fix it.

So, I guess now I should also let you know that I have set the following CSS
attributes to the OBJECT tag's id:

Code:

<style>
#FlashMenu
{
position:absolute;
bottom:1px;
left:-1px;
z-index:1000;
}
</style>



Also, one more thing to note: Everything in this page is in a table...accept
this movie. This is how my page looks while editting:

Code:

.
.
.
<body onload="javascript: cssVerScrolls('hidden');" bgcolor="#990000"
bottommargin="0" leftmargin="0" marginheight="0" marginwidth="0"
rightmargin="0" topmargin="0">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
rsion=6,0,0,0"
WIDTH="185"
HEIGHT="330"
id="FlashMenu"
ALIGN="">
<PARAM NAME=movie VALUE="FlashMenu.swf">
<PARAM NAME=loop VALUE=false>
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=best>
<PARAM NAME=scale VALUE=noscale>
<PARAM NAME=wmode VALUE=transparent>
<PARAM NAME=bgcolor VALUE=#FFFFFF>
<EMBED src="FlashMenu.swf"
loop=false
menu=false
quality=best
scale=noscale
wmode=transparent
bgcolor=#FFFFFF
WIDTH="185"
HEIGHT="330"
NAME="FlashMenu"
ALIGN=""
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
<table class="main" cellspacing="0" cellpadding="0" border="0">
.
.
.
</table>

Originally posted by: jameslyon
Try taking out the wmode attribute. I know from experience that IE and
Netscape/Mozilla apply the tranparent window mode differently and perhaps this
is a side effect.

I tried taking that attribute out and the following resulted:

IE: White background present
NN: Still renders transparent background

Okay, I figured it out! Good news and bad.

When the menu (in the movie) is visible, it is actually on top of a <div>.
The main feature of this site (I am trying to make) is that, no matter what
size the user's browser is, the only thing they'll have to scroll is this
<div>. The culpret to my problem...<div style="...overflow:auto;">. Well, by
removing this the menu performs flawlessly in both browsers. However, I
sacrifice the overflow feature (at least in NN). To compensate, for the time
being, I'm simply going to create two separate style ID scripts and just remove
the "overflow" feature from the Netscape style script.

For example:


<cfif NOT CGI.HTTP_USER_AGENT CONTAINS "MSIE 6.0">
<style>
table.main {
width:100%;
height:100%;
}
#FlashMenu {
position:absolute;
bottom:0.1%;
left:-1px;
z-index:1000;
}
#mainInfo {
height:100%;
width:100%;
background-image:url(testTextArea.png);
background-attachment:inherit;
background-position:top left;
background-repeat:repeat;
}
</style>
<cfelse>
<style>
table.main {
width:100%;
height:100%;
}
#FlashMenu
{
position:absolute;
bottom:4px;
left:-1px;
z-index:1000;
}
#mainInfo {
height:100%;
width:100%;
background-image:url(testTextArea.png);
background-attachment:inherit;
background-position:top left;
background-repeat:repeat;
overflow:auto; <--- Only for IE will this be present
}
</style>
</cfif>

<div id="mainInfo">
text goes here
</div>