Comunidad de diseño web y desarrollo en internet online

Div + css + z-index != Iexplorer

Citar            
MensajeEscrito el 06 Sep 2007 04:48 pm
Os contare una historia de terror, sobre como un explorador puede volver loco a una persona.
-Bien todo comenzo... :lol:

Bueno dicho la tontería al lío.

Mi problema viene a la hora de utilizar Z-index con div anidados, donde iexplorer es el protagonista malo (Solo lo he probado en el iexplorer 6 ya que no tengo el nuevo)

Estoy haciendo una pagina donde anido un div (container )que lleva un fondo con repite-x y dentro de el otro div (cabecera) que lleva una imagen de cabecera no-repite, y dentro de este div otro mas (container2) que hace de contenedor para las columnas que llevara la pagina web.
Bien pues el problema viene al intentar ordenar los div de manera que quede en vision :
1º cabecera
2º container
3º container2
osea asi:

Bien pues en firefox bien:
pero en iexplorer mal: no:

Código :

<style type="text/css">
html,body{
   height:100%;
   background-color:#9999FF
}
#container{
   background:url(cabeceraRepite.GIF) repeat-x;
   height:100%; 
   position:relative; 
   z-index:0;
}
#cabecera{
background:url(cabecera.GIF) no-repeat;
   height:100%;
   width:500px; 
   position:relative; 
   margin:auto;
   z-index:1;
}
#container2{
   height:100%; 
   position:relative; 
   z-index:-2;
}
#columnaIzquierda{
   background-color:#996666; 
   height:100%;
   width:200px; 
   position:relative;
   float:left;
   z-index:-3;
}
#columnaCentral{
   background-color:#99CC66; 
   height:100%;
   width:300px; 
   position:relative;
   float:left;
   z-index:-4;
}
</style>

Código :

<body>
<div id="container">
   <div id="cabecera">
      <div id="container2">
         <div id="columnaIzquierda"></div>
         <div id="columnaCentral"></div>
      </div>
   </div>
</div>
</body>


Gracias por adelantado :wink:

Por mash

0 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Sep 2007 06:49 pm
Si eso es un problema z+index en explorer no funciona, que piedra, yo lo que hago es que creo un css para firefox y otro para Iexplorer
saludos
:cool:

Por DanielJimenez

70 de clabLevel



Genero:Masculino  

Web Developer

mozilla
Citar            
MensajeEscrito el 01 Oct 2007 07:22 am
Hola!

verás he visto tu comentario :

DanielJimenez escribió:

Si eso es un problema z+index en explorer no funciona, que piedra, yo lo que hago es que creo un css para firefox y otro para Iexplorer
saludos
:cool:


y es justo lo que yo quiero hacer, ya tengo una hoja para firefox y otra para explorer pero no se como identificar el navegador, estoy maquetando una web hecha con java y no encuentro mas que ejemplos en PHP. Puedes ayudarme? Como lo haces tu para llamar a la css correcta?

Muchisimas gracias!

Por Relative

1 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 01 Oct 2007 07:34 pm

DanielJimenez escribió:

Si eso es un problema z+index en explorer no funciona, que piedra, yo lo que hago es que creo un css para firefox y otro para Iexplorer
saludos
:cool:


yo creo uno para ie7 y FF + uno pa IE6 D:! ..... ¿¿porque a mi?? :cry:

Por onnasama

325 de clabLevel

1 tutorial

 

firefox
Citar            
MensajeEscrito el 02 Oct 2007 06:01 am
Lo que necesito saber es como hacer para que si navegas en ie cojas la css de ie y si navegas en ff cojas la css de ff.... ¿alquien sabe como y donde se hace esto?

ayuda!

Por Relative

1 de clabLevel



Genero:Femenino  

firefox
Citar            
MensajeEscrito el 08 Oct 2007 05:11 am
Si quieres filtrar las hojas de estilo, podrias simplemente usar un "condicional para IE". El principal problema de IE con z-index es que no solo los divs que quieres posicionar deben tener un z-index, los contenedores que tienen el relative también.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino   Anime Bloggers Premio_Secretos Team Cristalab

Front-end Developer en Washington, DC

firefox
Citar            
MensajeEscrito el 08 Oct 2007 08:27 am
Para identificar al culpable del crimen:

Código :

var nombre = navigator.appName
   if (nombre == "Microsoft Internet Explorer") { ...

Por DriverOp

Claber

2510 de clabLevel



 

opera
Citar            
MensajeEscrito el 15 Oct 2007 04:14 pm
<head runat="server">
<title>Untitled Page</title>
<link rel="Stylesheet" href="stylesheet_Mozilla.css" type="text/css" />
<!--[if IE]>
<link rel="Stylesheet" href="stylesheet_IE.css" type="text/css">
<![endif]-->
</head>

Espero q sirva!

Por palulu

3 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Ene 2008 03:51 am
una pregunta acerca del z index, si al div que contiene otros div le quisiera poner z index tendria que hacerlo en todas las clases que afecten a los div tanto el contenedor como los que contiene o solo al contenedor... esque no se me colocan en orden... ni en ff y no se exactamente el porque.

Por Theos

70 de clabLevel



 

firefox
Citar            
MensajeEscrito el 12 Mar 2009 05:08 pm
nop. todos los elementos tienen un valor predeterminado de z-index (creo que es 1 o 0), y tu despues le cambias ese valor a uno mayor para que suba.....
y respecto a los de los explorers no es verdad que no funcione. estas cosas raras del explorer se arreglan obligando a que el elemento tenga "diseño" en el navegador (haslayout)

Por disecain

0 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.