View Full Version : flash and accordion js

04-15-2009, 01:43 PM
Hi i have a accordion website and trying to embed a flash. it embeds fine but when viewed in firefox the flash is dropped below the accordion and not hidden inside. it views fine in ie and safari. i have tried to add overflow: hidden; i have tried wmode: transparent and opaque, i have tried making position: absolute, moves it into place but stuff ie and safari too. still doesnt hide when accordion closes. here is the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.embedSWF("carsgallery.swf", "carsgallery", "500", "350", "9.0.0", "expressInstall.swf");</script>
<title>Cannon Signage</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script type="text/javascript" src="slidemenu.js"></script>
<style type="text/css">
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
.style2 {
font-size: 10px;
font-family: Geneva, Arial, Helvetica, sans-serif;
line-height: normal;
font-weight: 100;
.style8 {
color: #EF1422;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 16px;
<body onload="slideMenu.build('sm',700,25,10,1)">
<div id="wrapper">
<div id="header">
<div id="topmenu">
<a href="#">HOME</a> //
<a href="#">ABOUT US</a> //
<a href="#">FIND US</a> //
<a href="#">CONTACT US</a> //
<a href="#">LINKS</a>
<a href="/"><img src="images/logo.gif" border="0" /></a>
<ul class="sm style1" id="sm">
<li style="background-color: #fff;">
<img src="images/1.gif" alt="" class="accordian_tab" />
<div class="accordian_content"></br>
<p class="style8">WELCOME TO</p>
<p class="style8">CANNON SIGNAGE CONCEPTS</p></br>
<br />
<p class="style2">Here at Cannon Signage Concepts, we’re not just a sign company. We stand out from the competition and we’ll make you stand out too.</p>
<span class="style2"><br />
<p class="style2">Our design services cover every aspect of your image-making requirements from sign and graphic design through to production and installation.</p>
<span class="style2"><br />
<p class="style2">Our services include design, corporate signage, fleet vehicle livery, one-off vehicle graphics, illuminated signage, outdoor durable large format printing, point of sale signage, window graphics, banners, exhibition displays and much, much more.</p>
<p class="style2">Our skilled, in-house sign makers and fabricators are capable of turning these imaginative design ideas into a reality.</p>
<span class="style2"><br />
<p class="style2">If you're looking for something more from your sign maker, whether you want us to work our magic from scratch, or simply require reproductions of existing jobs,
Call us now!</p>
<li style="background-color: #dcddde;"><img src="images/2.gif" alt="" class="accordian_tab" />
<div class="accordian_content">
<p class="style2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dolor lorem, varius id, dapibus et, mattis at, risus. Integer eget dolor at nibh mollis bibendum. Aliquam erat volutpat. In consequat erat nec lacus. Praesent euismod, mauris non venenatis iaculis, est eros convallis diam, nec suscipit velit est eu augue. Sed pulvinar sollicitudin magna. Cras non massa in eros dictum laoreet. Integer porta. In consequat felis nec dui. Sed suscipit porta dui. Maecenas sollicitudin varius ipsum.</p>
<p class="style2">Suspendisse potenti. Vestibulum non enim vel turpis hendrerit congue. Fusce ante lacus, feugiat a, dignissim eget, rutrum vulputate, quam. Sed hendrerit vehicula mi. In fermentum massa ut sem. Donec id est. Phasellus consequat dictum nunc. Praesent leo turpis, mattis at, gravida id, fringilla vitae, diam. Donec diam mi, rutrum sed, blandit nec, fermentum nec, neque. Mauris nunc magna, pharetra ut, dictum non, hendrerit sit amet, nisi.</p>
<p class="style2">Cras nisl. Nam auctor nunc sed neque. Sed ut libero a turpis vehicula accumsan. Curabitur eros. Morbi id eros. Duis cursus enim sed purus. Integer iaculis nibh at nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed et ligula a turpis tempus varius. Nulla pharetra justo sit amet nisi. Suspendisse ornare massa nec felis. </p></div></li>
<li style="background-color: #bcbdc0;"><img src="images/3.gif" alt="" class="accordian_tab" />
<div class="">
<div id="interiors" style="float: left; margin-left: 140px; margin-top: 60px;">
<img src="images/interiors.jpg"/></div></div>
<li style="background-color: #9d9fa2;"><img src="images/4.gif" alt="" class="accordian_tab" />
<div class="">
<div id="interiors" style="float: left; margin-left: 140px; margin-top: 60px;">
<img src="images/exteriors.jpg"/></div></div>
<li style="background-color: #787878;"><img src="images/5.gif" alt="" class="accordian_tab" />
<div class="">
<div id="carsgallery" >
<h1>Alternative content</h1>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p>
<li style="background-color: #58585a;"><img src="images/6.gif" alt="" class="accordian_tab" />
<div class="">
<div id="identities" style="float: left; margin-left: 100px; margin-top: 60px">
<img src="images/identitiesgallery.jpg"/>

<div id="footer">
<img src="images/slogan.gif" /></div>


var slideMenu=function(){
var sp,st,t,m,sa,l,w,sw,ot;
sp=s; st=sw; t=mt;
l=sa.length; w=m.offsetWidth; sw=w/l;
ot=Math.floor((w-st)/(l-1)); var i=0;
for(i;i<l;i++){s=sa[i]; s.style.width=sw+'px'; this.timer(s)}
timer:function(s){s.onclick=function(){clearInterval(m.timer);m.timer=setInterval(function(){slideMe nu.slide(s)},t)}},
var cw=parseInt(s.style.width,'10');
var owt=0; var i=0;
var o,ow; var oi=0; o=sa[i]; ow=parseInt(o.style.width,'10');
if(ow>ot){oi=Math.floor((ow-ot)/sp); oi=(oi>0)?oi:1; o.style.width=(ow-oi)+'px'}


* {margin:0; padding:0}
body {
background-color: Black;
background-image: url(images/splatter.gif);
background-repeat: no-repeat;


#wrapper {
width: 900px;
margin: auto;

#header {
height: 100px;
padding-top: 80px;
padding-left: 10px;

#topmenu {
float: right;
width: 400px;
font-size: 10pt;
color: Red;
margin-top: 70px;

#topmenu a {
color: Red;
text-decoration: none;

.sm {list-style:none; width:900px; height:378px; display:block; overflow:hidden}
.sm li {float:left; display:inline; overflow:hidden;}

.accordian_tab {
float: right;


.accordian_content {
padding-left: 40px;
padding-top: 60px;
padding-right: 100px;
padding-bottom: 0px;


#footer img {
float: right;
margin-top: 20px;

#carsgallery {float: left;

overflow: hidden;


be greatful to anyone that can help. :D I have wasted so much time on this. and i need to complete this project.

thanks in advance:thumbsup: ok for someone to email if they want the url

04-16-2009, 10:51 AM
Could you post a link to your page (as we don't have the image/swf files to get something about your issue)?