z-index con firefox

[jribasm]

Hola!

Tengo un problema de compatibilidad de navegadores.

El tema en cuestion es que tengo unos divs que tienen un estilo css. Por encima de estos divs hay generado un sistema de menu con javascript tambien con estilos css.

Para que el menu quede por encima he utilizado la propiedad z-index.

Esto solo funciona con explorer. En firefox al poner un numero negativo en esta propiedad no se visualiza la capa.

Si alguien se le ocurre como puedo solucionar este problema...

Muchas garcias

[SiR.CARAJ0DIDA]

z-index no acepta numeros negativos... podes usar de 0 a 32 mil y pico

[jribasm]

z- index si que acepta numeros negativos... solo en el explorer. En cambio la propiedad z -index no me funciona con firefox ni con numeros positivos ni negativos.

[JavierB]

Hola jribasm

z-index funciona bien en Firefos con números positivos. Prueba con este código:

Código:

<div style="z-index:0; position:absolute; width:100px; height:100px; left:50px; top:50px; background:red;"></div>
<div style=" z-index:1; position:absolute; width:100px; height:100px; left:100px; top:100px; background:blue;"></div>

El div que tenga el z-index más alto quedará encima.

Saludos,

[fearlex]

El firefox definitivamente no acepta z-index negativo, y prueba de ello, es:

http://www.fearlex.com

Este es mi portfolio y aclaro no busco publicidad, solo que es el unico ejemplo que tengo a la mano, si se dan cuenta en el internet explorer se ven unas ramificaciones en el background, pero en firefox no se ven, tienen z-index: -1, y no sale.

[kahlito]

Hola fearlex, no hace falta que pongas z-index:-1, simplemente poniéndolo a 0 y el resto a partir de 1, 2, etc ya todos te irán bien

En tu caso tienes que cambiar en el css del contenido algunas cosas como meterle una posición relativa (position:relative) y luego un z-index por ejemplo de 1 (z-index:1):

Código HTML:

 #headerizq {position:relative;
             float: left;
             width: 176px;
		     height: 55px;
		     background: url(images/headerizq.gif) no-repeat;
			 z-index:1;
}

 #headerder {position:relative;
             float: left;
			 width: 488px;
			 height: 55px;
			 margin: 0px;
			 background: url(images/headerder.gif) no-repeat;
			 padding: 0px;
			 z-index:1;
}

 #nav {position:relative;
       float:left;
       position: relative;
	   top:15px;
	   left: 20px;
	   width: 400px;
	   height: 20px;
	   padding-left: 0px;
	   border-bottom: 1px dotted #000;
	   text-align: center;
	   z-index:1;
}

 #left {position:relative;
        float: left;
		width: 176px;
		height: 334px;
		background: url(images/left.gif) no-repeat;
		z-index:1;
}

 #right {position:relative;
         float: left;
		 width: 488px;
		 height: 315px;
		 background: url(images/right.gif) no-repeat;
		 z-index:1;
}

 #righten{position:relative;
         float: left;
		 width: 488px;
		 height: 315px;
		 background: url(images/righten.gif) no-repeat;
		 z-index:1;
}

Y luego para que las imágenes de fondo queden por debajo de estas solo con un z-index:0; ya te valdrian tanto en Firefox como Iexplorer, Opera etc

Código HTML:

 #floatimg {
            position: absolute;
			left:0px;
			top:10%;
			z-index:0;
			margin-left: 0px;
			background-image: url(images/topfloatimg.gif);
			width: 272px;
			height: 387px; 
}

 #bottomcorner {
                position: absolute;
				right: 0px;
				bottom: 48px; 
				z-index: 0;
				margin-bottom: 0px;
				margin-right: 0px;
				background-image: url(images/bottomcorner.jpg);
				width: 245px;
				height: 387px;
}

Espero que te sirva

[fearlex]

Whoa, sabes que tienes toda la razon, por que ponerlo negativo si lo puedo poner positivo, esta noche cuando llegue a casa, lo voy a cambiar, gracias khalito, una vez mas.

[fearlex]

Bueno, respondiendo de nuevo, le comento a Kahlito que hice los cambios que mencionas, y WHOA, ya en firefox se ve lo mismo que el explorer, lo unico que no hice lo que mencionas fue ponerle los float: left que me pones por que me descuadrarian el sitio, pero a todas las capas le agregue el position: relative y el z-index: 1.

Luego a los divs flotantes de background les puse z-index: 0 y asunto resuelto, ya la familia gecko cuenta con las rasgaduras de background de mi portfolio.

Y por supuesto para no salirme del tema, le recomiendo al autor de este post jribasm que trate de no usar indices negativos, ya que firefox al parecer es positivo hasta para los z-index.


Gracias Kahlito

[kahlito]

De nada fearlex me alegro, por fin tienes tu portafolio arreglado