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