Border Problem When Using "swfobject" 1

[ginger213]

Hi,

You guys were nice enough to help me sort out a problem I had with borders on a page, and I thought everything was set to go. Unfortunately, I have a new problem that I hope someone's come across before.

I inserted a flash animation using swfobject. (There's supposed to be a 6px wide border to the right of where the animation is ... between the animation and the navigation menu.) When someone doesn't have flash or javascript enabled, it's supposed to display a static image in its place. So, the code uses the regular img tag inside a div with the ID of "anim", and I applied the right border to this div. It works fine in IE6 and IE7, but the right border doesn't display in Firefox (3.0.10) "when the flash animation is run". If flash or javascript is disabled it displays the static image and displays the right border like it's supposed to.

Does anyone know what would cause this? Here's the applicable javascriptcode that I have in the head section ... the swfobject code is external:

<script type="text/javascript">
var flashvars = {};
var params = {};
params.bgcolor = "#FFFFFF";
var attributes = {};
attributes.id = "anim";
swfobject.embedSWF("flash/home3b.swf", "anim", "500", "200", "6.0.0", false, flashvars, params, attributes);
</script>

And here's the css:

#anim {border-right: 8px solid #3E76B5}

Now that I think about it, maybe I should have posted this in the javascript forum, but I don't know if it's a javascript issue or just a firefox issue with css, although my style sheet validates (as does the html).

Anyway, does anyone have any thoughts about why this is happening?

Thanks!

 

[Vragabond]

I wonder if we could see:

1. Your code, including #anim element before JS is fired.
2. Your code, including #anim element after JS is fired.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ginger213]

Sorry, I meant to post a link to this page:

http://webpages.charter.net/testspace213/border-problem.html

 

[ginger213]

Anyone have any ideas at all what would cause this?

Thanks

 

[Vragabond]

It looks like it is not the case, but most scripts render flash movies on FF with embed tag. This one seems to not create the embed tag, but it might be worth checking by adding a border to the embed tag within the #anim object as well.

Second, I am not sure, but it seems like FF does not want to apply any styles to an object element. This would probably be because object is simply a placeholder for another source to inject its contents into it.

You might have trouble finding out why it is that FF behaves this way. However, you could simply add another wrapper around the animation. It won't be the most semantic solution, but it should work nicely.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ginger213]

Thanks for looking vragabond. I think I might be in over my head.

I read that with swfobject version 2:

One of the big changes between SWFObject 1.x and SWFObject 2.0 is that SWFObject 2.0 replaces the target DIV with the object element while SWFObject 1.x simply placed the object and/or embed elements inside the target DIV.

Do you think this is part of the problem? If so, how can I apply a style to the embed code which I assume is part of swbobject.js? I tried using the following css:

#anim embed {border-right: 8px solid blue}

. . . but this didn't work either. I've also tried putting another div around the initial one, and while this corrected the problem in Firefox, it created another problem in IE as you can see here:

http://webpages.charter.net/testspace213/border-problem.html

Thanks again for taking time to look at this.

ginger

 

[Vragabond]

Which IE is giving you problems? It seems to render OK in my IE7. You should now be able to remove the border from the #anim object.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ginger213]

Thanks vragabond. The double divs does the trick. I just had forgotten that I needed to remove the border from the #anim element. All is fine now in IE6, IE7 and Firefox3. I haven't tested any other browsers yet.

Thanks again!