overflow:auto makes the swf disappear in firefox

overflow:auto makes the swf disappear in firefox

on clicking one of 3 tabs with this code

<span onclick="change_page('1')" </span>

This javascript function below hides a couple of <div> groups of content and shows the one specified by the page_number passed in as a parameter.

function change_page(page_number){
document.getElementById('content_group1').style.visibility = "hidden";
document.getElementById('content_group2').style.visibility = "hidden";
document.getElementById('content_group3').style.visibility = "hidden";

document.getElementById('content_group'+page_number).style.visibility = "visible";
}

The 'content_group's have the class .group and the #ids shown and are styled with the css below (I need auto for the overflow because the content in the groups is fed from xml/xsl and can be of any size, the number of pages also varies (fed from xml/xsl). I have provided code here for the 3 page case as an example.)

.group
{
position: absolute;
top:25px;
border:solid 1px;
border-color:#000;
border-bottom-color:#ccc;
border-right-color:#ccc;
padding-top:10px;
background-color:#ececdb;
width:740px;
height:450px;
overflow:auto;
}

#content_group1{}
#content_group2{visibility: hidden;}
#content_group3{visibility: hidden;}

Works fine as tabbed pages on a webpage in IE, apart from flash content in firefox :mad: . Here, the flash does not appear, unless (teasingly) the flash is in the last content group i.e. the third one in the case given above(I'm sure that's a clue :confused: )

Take away the auto on overflow and it works fine all round. But we like the auto on the overflow. Can you help?

Here are a couple of links to the offending files. Best view the source in firefox for readability :)

Both work in IE (i.e. displays the flash no matter which tabbed page the flash is on).

But in Firefox:-
This one does not display the flash (it should be on tabbed page four).
http://www.leading-change.org.uk/autoproblem/ap.html

This one does display the flash (as it is on the last tabbed page, but why this should be ok I don't know.)
http://www.leading-change.org.uk/autoproblem/ap2.html

Excuse use of the term tabs, when they are buttons (they were tabs and I changed them - habit).

the problem could be that ur flash files have the same ID, i know they are the same flash file but, you can only use an ID one time perpage, try changing the id of one of them and see if that helps

Thanks Aerospace_Eng_, I've tried that one, it could have been the problem, but wasn't.

Sorry, :o I should have removed/changed that id duplication in this file :o (I copied and pasted the same flash code for speed when posting the links)

I've had htmlTidy on the code, it checks out for typos/tags closed etc. I've churned out a dozen variants of the pages using the xml/xsl and its always the flash on the last page that shows, be it page 2 or 10. I can't reason out why the flash on the other pages is a no-show. At the moment I'm thinking its a browser quirk (same as saying 'I dunno what it is')

I have designed a fall back with no auto scroll bars (and coded one that used layers to hide/show the pages rather than the visible/hidden property - same problem). Also tried embedding the flash using a standards compliant method from alistapart.com, no luck.
The auto is such a neat solution for us. It's a shame it doesn't work, and in the standards compliant browsers too :confused: . I'm not hopeful of a solution, but I do hope someone knows why its doing this??? A different method of show/hiding the pages or embedding the flash or something would also be very welcome, but keeping flash and the auto scrollbars :thumbsup: .