SWF in Firefox vs. IE

GabrielV · Post by **GabrielV** » March 1st, 2006, 1:15 pm

http://www.gabrielvalles.com/03Illustra ... ation.html

I am having problems having the above link render properly in Firefox. It works fine in IE but in Firefox it shifts the bottom SWF to the right putting the thumbnails off screen.

This page consists of one SWF file(Menues and BorderImage) Stacked on top of another SWF(Gallery).
I am using this method, because I would like for my website to autoscale to fill any resolution monitor with a full screen image.

I could embed one SWF into another in Flash but I do not have total control of the "gallery" SWF as I am using an image viewer progam (called Bananalbum) this does not allow me to position the file properly in Flash. So, Staking the two SWF files seems to be the best option.

Thanks!

krmathis · Post by **krmathis** » March 1st, 2006, 2:10 pm

The website is far from error free: http://validator.w3.org/check?uri=http: ... ation.html

Fixing some of those should make it look more consistent of several browsers.

GabrielV · Post by **GabrielV** » March 1st, 2006, 3:10 pm

Thanks krmathis - I also used that validator. it seems to think the code for the SWF files are invalid. This code was generated by Flash not an HTML editor. I tryed validating another all Flash site and that one failed validation as well.

I wonder if All flash sites are not common enough to pass validation? If so I would probably need some workaround to force that stray SWF into position.

jqp · Post by **jqp** » March 1st, 2006, 7:00 pm

No, most people that use Flash don't use completely valid HTML to embed their flash, and that's usually okay. Regardless of what Flash is generating, all you need to embed Flash is:

Code: Select all

<object data="movie.swf" type="application/x-shockwave-flash" height="xxx" width="xxx">
<param name="movie" value="movie.swf">
<p>Alternate content goes here</p>
</object>

That's valid and works well in all modern browsers. The benefit to that code versus yours (generated by Flash) is that your code contains an OBJECT tag that Firefox doesn't understand and a non-standard EMBED tag that Firefox does understand. My code contains one OBJECT tag that every browser understands. The benefit is that there is less to debug, so when a browser doesn't do what you expect, there is less to debug.

I'll take a look later. Got cut short on time.

jqp · Post by **jqp** » March 1st, 2006, 8:49 pm

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Gabriel Valles - Illustration</TITLE>
<BASE href="http://www.gabrielvalles.com/03Illustration/">
<STYLE type="text/css">
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
body { background: #3a456d; }
object { height: 100%; width: 100%; vertical-align: bottom; }
#main {  
height: 100%; width: 100%;
position: relative;
z-index: 2;
left: -12%;
}
#blendmodes { 
position: absolute; 
z-index: 1;
right: 0;
width: 50%;
top: 0;
}
</STYLE>
</HEAD>
<BODY onload=fmove();>
<DIV id="main"><OBJECT id=blendmodes2 data="03Illustration.swf" type="application/x-shockwave-flash">
<PARAM NAME="allowScriptAccess" VALUE="sameDomain">
<PARAM NAME="movie" VALUE="03Illustration.swf">
<PARAM NAME="wmode" VALUE="transparent">
</OBJECT></DIV>
<OBJECT id=blendmodes data="res/album.swf" type="application/x-shockwave-flash">
<PARAM NAME="allowScriptAccess" VALUE="sameDomain">
<PARAM NAME="movie" VALUE="res/album.swf">
<PARAM NAME="wmode" VALUE="transparent">
</OBJECT>
</BODY>
</HTML>

The works in both Firefox and IE, and is probably about identical to what you have already. It also validates. I left the "onload" attribute on the BODY element, even though it's calling a function that doesn't exist. I assumed you had it there for a reason.

How well do you know HTML and CSS? I would suggest that you put a few navigational links and links to some images INSIDE one of the OBJECT tags for Google's sake and for people who don't have/want Flash. That's something you'd have to do by hand, though.

Your art is really cool, and it's a nice site.

GabrielV · Post by **GabrielV** » March 1st, 2006, 11:10 pm

Thanks jqp! I'm glad you like my art. I'm finally taking the time to update my site after three years. The XML gallery will really help me update more regularly.

I really appreciate you taking the time to help me out. I know basic HTML and just started working with style sheets this week. I can pretty much read the code and interpret what it means. But, I don't really know proper syntax. I usually use trial and error with different code I find online.

A couple of more questions about your code.
1. on my previous version I was referencing a seperate.css file, are the style elements now intergrated into your HTML code or do I still need a seperate .css?
2. when I scale down the browser window the Cowgirl starts getting cut off on the left side of the page. Is there a way to constrain that edge of the SWF so that it never goes off screen? If I could fix this, your code would be perfect.

Thanks Again!

jqp · Post by **jqp** » March 2nd, 2006, 8:41 am

My CSS says that 12% of the SWF will go off the left edge of the screen. I was trying to match what you had where the horse's tail usually went of the edge of the screen a little bit. You might adjust your Flash movie so it really does hang off the edge of the movie a little bit like you want, and then remove my -12% thing. I also ran into a Firefox bug where you can't click directly on the links in the flash movie.

GabrielV · Post by **GabrielV** » March 2nd, 2006, 10:51 am

Thanks jqp,

I have a feeling that may be a issue with the SWF's stacked on top of each other. Firefox may not know how to handle one SWF on top of the other.

Orbite · Post by **Orbite** » March 2nd, 2006, 12:12 pm

For future references : http://www.alistapart.com/articles/flashsatay/

jqp · Post by **jqp** » March 2nd, 2006, 12:28 pm

jqp wrote:I also ran into a Firefox bug where you can't click directly on the links in the flash movie.

GabrielV wrote:I have a feeling that may be a issue with the SWF's stacked on top of each other. Firefox may not know how to handle one SWF on top of the other.

Actually, that's because Firefox gets confused when you use margins or CSS positioning to position a Flash movie. If I moved the movie by 15pixels, you'd have to click 15 pixels away from the target. It's silly.

My attempt to fix that was do wrap it in a DIV and position the DIV. Didn't work.

If you remove the <code>left: -12%;</code> from my code and adjust the actual Flash movie to account for it (move the girl on the horse to the left however much you want), that will fix both the clicking problem and the scaling problem you mentioned.

GabrielV · Post by **GabrielV** » March 2nd, 2006, 1:41 pm

Thanks jqp! I'll try that when I get home tonight.

Thanks Orbite! Great reference.

jqp · Post by **jqp** » March 2nd, 2006, 2:56 pm

GabrielV wrote:1. on my previous version I was referencing a seperate.css file, are the style elements now intergrated into your HTML code or do I still need a seperate .css?

It doesn't matter. The benefit to having a separate CSS file is that the separate file gets cached by the browser so that the browser only has to load it once. The downside to a separate CSS file is that it's a separate HTTP request that takes the browser an extra second or two to go get.

In this case, people are going to be staying on one page for a while and the CSS is really short, so putting the CSS inline in a STYLE tag is probably best. In most real-life cases you want the CSS file to be an external file either linked with a LINK tag or imported with a css <code>@import</code> rule.

GabrielV · Post by **GabrielV** » March 2nd, 2006, 4:09 pm

Thanks jqp,

That is really usefull to know

GabrielV · Post by **GabrielV** » March 3rd, 2006, 2:05 pm

jqp wrote:
jqp wrote:
If you remove the <code>left: -12%;</code> from my code and adjust the actual Flash movie to account for it (move the girl on the horse to the left however much you want), that will fix both the clicking problem and the scaling problem you mentioned.

Hi jqp,

I tried your suggestion and it didn't seem to work. I even adjusted my flash file to where the cowgirl was way off screen and it still wouldn't work. I'll play around with it some more to see if I'm doing something wrong.