Foros del Web » Creando para Internet » CSS »

problema con z-index y navegadores.

Estas en el tema de problema con z-index y navegadores. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/02/2011, 10:31
 
Fecha de Ingreso: noviembre-2009
Mensajes: 64
Antigüedad: 8 años
Puntos: 1
Sonrisa problema con z-index y navegadores.

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;
    
margin0 auto;
    
displayblock;
    
positionrelative;
    
background-imageurl(images/mask.jpg);
    
background-repeat:no-repeat;
              
background-attachment:fixed;
    
background-position5360%;
    
z-index4;
    

    
    }
    
#todo {width: 990px;
    
positionrelative;
    
displayblock;
    
background-colortransparent;
    
floatright;
    
z-index3;
    
margin-bottom10px;
}

#art {  width: 100%;  
           
displayblock
           
positionrelative;     
           
backgroundurl("images/bg2.png");     /*imagen transparente*/
           
background-repeat
           
repeatz-index2;

}

#content {
    
width100%;
    
displayblock;        
    
positionrelative;
    
backgroundurl("images/bg2.png"); /*imagen transparente*/
    
background-repeatrepeat;

    
}

#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
  #2 (permalink)  
Antiguo 28/02/2011, 10:44
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: problema con z-index y navegadores.

Date una vuelta por aca
http://www.elwebmaster.com/articulos...piedad-z-index
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 28/02/2011, 11:44
 
Fecha de Ingreso: noviembre-2009
Mensajes: 64
Antigüedad: 8 años
Puntos: 1
Respuesta: problema con z-index y navegadores.

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

Última edición por Tooj; 28/02/2011 a las 14:12

Etiquetas: navegadores, z-index
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 03:39.