problema con z-index y navegadores.

[Tooj]

tengo un problema con los navegadores. Para estandarizar la vista de las webs que hago uso opera, IE, firefox y safari.

Tengo dos plantillas, en pocas palabras, así:

Código PHP:

   
plantilla 1
 
<div id="page">
 
<div id="header">
 
</div>
 
<div id="todo">
 
<div id="content">
 
<div id="articulo 1">
 
</div>
 
</div>
 
</div>
 
</div> 
   

Código PHP:

   
plantilla 2
 
<div id="page">
 
<div id="header">
 
</div>
 
<div id="todo">
 
<div id="art">
 
<div id="articulo2">
 
</div>
 
</div>
 
</div>
 
</div> 
   

la onda esta en que la primera plantilla funciona en todos lo navegadores, mientras que la plantilla 2 solo se ve bien en firefox y safari y se ve mal en opera e IE. la plantilla uno es la portada principal,la portada dos es para los articulos. en la plantilla 1 atras se ve el fondo, encima el png transparente. en la plantilla 2 atras se ve el fondo, pero encima se ve un background negro que no deja ver el fondo, pero como les digo en algunos navegadores se ve correctamente y en otros no.

comence a usar z-index porque los links no funcionaban en frefox y safari, precisamente porque unos divs bloqueban a otros divs.


aqui parte del codigo css

Código PHP:

  #page {width: 990px;
    margin: 0 auto;
    display: block;
    position: relative;
    background-image: url(images/mask.jpg);
    background-repeat:no-repeat;
              background-attachment:fixed;
    background-position: 53% 60%;
    z-index: 4;
    
 
    
    }
    
#todo {width: 990px;
    position: relative;
    display: block;
    background-color: transparent;
    float: right;
    z-index: 3;
    margin-bottom: 10px;
}
 
#art {  width: 100%;  
           display: block; 
           position: relative;     
           background: url("images/bg2.png");     /*imagen transparente*/
           background-repeat: 
           repeat; z-index: 2;
 
}
 
#content {
    width: 100%;
    display: block;        
    position: relative;
    background: url("images/bg2.png"); /*imagen transparente*/
    background-repeat: repeat;
 
    
}
 
#articulo1 { padding: 5px; width: 100%;  z-index: 1;}
 
#articulo2 { padding: 5px; width: 100%;  z-index: 1;} 
   

total, que no se que pasa. y no se como arreglarlo

alguna idea que me pueda orientar.

gracias. saludos

[gVenom]

Date una vuelta por aca
http://www.elwebmaster.com/articulos...piedad-z-index

[Tooj]

muchas gracias, veo que estaba usandolo al reves. un valor más bajo en z-index es mas profundo, un valor más alto es más superificial. todos los elementos tienen que estar posicionados con relative, fixed, absolute,

aunque no entendi bien que pasa con un z-index negativo.


ya pude arreglar el problema, lo que pasa, como explica el texto que me recomendaste, es que la propiedad float tambien le da posicion a las capas.

arreglado.

gracias!!