Al lío, mirar estoy empezando a diseñar un sitio web y me he encontrado con un problema de visualización en firefox (chrome y IE funciona correcto).
Tengo una cabecera en su div correspondiente donde he insertado una animación flash luego otras divisiones para el cuerpo de la web, otra para el efecto de la sombra, un menú desplegable, etc. Hasta ahora todo bien, pero al insertar una mapa de google en firefox (en el resto bien) el mapa es capaz de sobreponerse encima de la cabecera pero no del menú. Probando un poco he insertado este mapa dentro de una div y una tabla, que pasan por debajo de la cabecera pero el mapa prevalece encima. Os cuelgo el código para que evaluéis por si hay un error en los z-index o sabéis alguna forma de aplicar algo parecido para el elemento flash o el mapa de google. Gracias.
CSS div cabecera:
Código :
#cabecera{
margin-top: 0;
width: 750px;
height: 180px;
position:fixed;
left:50%;
margin-left: -373px;
z-index: 10;CSS div mapa:
Código :
#mapa{
left: 50%;
margin-left: -225px;
z-index:-50;
}Inserción de la cabecera flash y una imagen de fondo por si no disponen de flash instalado (también agradezco si saben hacer algo mas optimo con esto)
Código :
<div align="center" id="cabecera" >
<img src="Imagenes/Cabecera.jpg" width="750" height="180" />
<!-- Cabecera Flash -->
<script type="text/javascript">
var so = new SWFObject("Cabecera.swf", "cabecera", "112", "33", "7", "#ADDCF5");
so.write("cabecera");
</script>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</div>Código de la tabla la div y la inserción del mapa de Google
Código :
<table width="458" height="400px" border="1" bordercolorlight="#999999" id="TablaMapa" align="center"> <tr > <td> <div id="mapa" style="width:450px; height:400px"></div> </td> </tr> </table>
Código de configuración del mapa
Código :
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(39.428733,-0.783586);
var settings = {
zoom: 15,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapa"), settings);
var companyLogo = new google.maps.MarkerImage('Imagenes/MarcadorMapa.png',
new google.maps.Size(120,50),
new google.maps.Point(0,0),
new google.maps.Point(50,50)
);
var companyPos = new google.maps.LatLng(39.428733,-0.783586);
var companyMarker = new google.maps.Marker({
position: companyPos,
icon: companyLogo,
map: map,
title:"..."
});
} 