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!!