Foros del Web » Creando para Internet » CSS »

z-index con firefox

Estas en el tema de z-index con firefox en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 05/12/2006, 07:13
 
Fecha de Ingreso: octubre-2005
Mensajes: 13
Antigüedad: 12 años, 2 meses
Puntos: 0
z-index con firefox

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
  #2 (permalink)  
Antiguo 05/12/2006, 08:54
Avatar de SiR.CARAJ0DIDA  
Fecha de Ingreso: junio-2004
Ubicación: Acá
Mensajes: 1.166
Antigüedad: 13 años, 5 meses
Puntos: 4
z-index no acepta numeros negativos... podes usar de 0 a 32 mil y pico
__________________
Internet Explorer SuckS
Download FireFox
  #3 (permalink)  
Antiguo 06/12/2006, 05:35
 
Fecha de Ingreso: octubre-2005
Mensajes: 13
Antigüedad: 12 años, 2 meses
Puntos: 0
Re: z-index con firefox

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.
  #4 (permalink)  
Antiguo 06/12/2006, 08:16
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Re: z-index con firefox

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,
  #5 (permalink)  
Antiguo 06/12/2006, 11:23
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: z-index con firefox

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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #6 (permalink)  
Antiguo 06/12/2006, 22:03
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: z-index con firefox

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
  #7 (permalink)  
Antiguo 07/12/2006, 08:35
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: z-index con firefox

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.
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #8 (permalink)  
Antiguo 07/12/2006, 22:09
Avatar de fearlex  
Fecha de Ingreso: septiembre-2003
Ubicación: Exiliado de mi patria
Mensajes: 1.047
Antigüedad: 14 años, 2 meses
Puntos: 5
Re: z-index con firefox

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
__________________
Ya viene llegando, el comunismo en Cuba, ya se esta acabando.
www.fearlex.com | www.fearlexworld.com
  #9 (permalink)  
Antiguo 08/12/2006, 12:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Re: z-index con firefox

De nada fearlex me alegro, por fin tienes tu portafolio arreglado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:24.