Problema con menú acordion

[direccionsur]

Hola.
Estoy desarrollando un sitio con un menú tipo acordión horizontal donde cada botón despliega una imagen, con un slide. Este funciona perfecto cuando el contenido de cada uno de los items es un jpg. Pero cuando remplacé cada jpg por un swf se me desordenó todo. En firefox lo veo todo bien, el problema aparece en explorer y chrome, ya que los swf se sobreponen a los botones del menú quedando todos los botones a una profundidad mas abajo que los swf.

este es el css para el slide...ojala alguien me pueda ayudar!!!

/*--- slides ---*/
#slides { top: 350px; left: 0px; width: 1200px; height: 280px; overflow: hidden;
}
#slides .slide { position: absolute; top: -6px; width: 670px;
}
#slides .slide img { position: absolute; top: 0px; left: 0px;
}
#slides .slide .slidebutton { display: block; position: absolute; top: 0px; right: 0px; height: 285px; width: 100px; text-decoration: none; border-right: 1px solid white; background-color: #693d5e; background-image: url(imagenes/bot-off.jpg); background-repeat: no-repeat;
}
#slides .active .slidebutton { background-color: #ffd800; background-image: url(imagenes/bot-on.jpg); background-repeat: no-repeat;
}
#slides .slide .slidebutton img { position: absolute; top: auto; display: block; bottom: 5px; left: 5px; height: 31px;
}

#slide-1 { position: absolute; top: 0; right: 600px; z-index: 7; }
#slide-2 { position: absolute; top: 0; right: 500px; z-index: 6; }
#slide-3 { position: absolute; top: 0; right: 400px; z-index: 5; }
#slide-4 { position: absolute; top: 0; right: 300px; z-index: 4; }
#slide-5 { position: absolute; top: 0; right: 200px; z-index: 3; }
#slide-6 { position: absolute; top: 0; right: 100px; z-index: 2; }
#slide-7 { position: absolute; top: 0; right: 0px; z-index: 1; }