Problema con vision de capas

[rulide]

Hola,

Estoy haciendo una web con Dreamweaver con capas. Con Mozilla se ve tal cual lo estoy editando, pero con el Internet Explorer y el Google Chrome, las capas se solapan unas a otras y es un auténtico desastre.

He estado mirando post de gente que le pasaban cosas parecidas, y muchos lo arreglaban modificando la posición de relativa a absoluta. Comprobé que no fuera eso pero esta todo en "position: absolute".

<style type="text/css">
#apDiv1 {
position:absolute;
width:201px;
height:252px;
z-index:0;
left: 703px;
top: 352px;
}
.Titulo {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 16px;
color: #FFF;
}
#apDiv2 {
position:absolute;
width:201px;
height:152px;
z-index:1;
left: 10px;
top: 548px;
visibility: visible;
}
#apDiv4 {
position:absolute;
width:201px;
height:344px;
z-index:1;
left: 10px;
top: 12px;
}
#apDiv5 {
position:absolute;
width:201px;
height:180px;
z-index:1;
left: 10px;
top: 724px;
visibility: visible;
}
#apDiv6 {
position:absolute;
width:201px;
height:174px;
z-index:1;
left: 10px;
top: 363px;
visibility: visible;
}
#apDiv7 {
position:absolute;
width:777px;
height:561px;
z-index:1;
left: 235px;
top: 899px;
visibility: visible;
}
#apDiv8 {
position:absolute;
width:384px;
height:446px;
z-index:1;
left: 490px;
top: 1101px;
visibility: visible;
}
#apDiv9 {
position:absolute;
width:201px;
height:188px;
z-index:1;
left: 10px;
top: 922px;
visibility: visible;
}
.letras {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000;
}
#apDiv {
position:absolute;
width:777px;
height:817px;
z-index:1;
left: 235px;
top: 12px;
visibility: visible;
}
#apDiv10 {
position:absolute;
width:212px;
height:171px;
z-index:1;
left: 9px;
top: 364px;
}
#apDiv11 {
position:absolute;
width:212px;
height:171px;
z-index:1;
left: 9px;
top: 364px;
}
#apDiv12 {
position:absolute;
width:212px;
height:171px;
z-index:1;
left: 9px;
top: 364px;
}
#apDiv13 {
position:absolute;
width:211px;
height:337px;
z-index:1;
left: 9px;
top: 12px;
}
#apDiv14 {
position:absolute;
width:380px;
height:220px;
z-index:1;
left: 234px;
top: 664px;
}
#apDiv15 {
position:absolute;
width:201px;
height:172px;
z-index:1;
left: 9px;
top: 715px;
}
#apDiv16 {
position:absolute;
width:212px;
height:171px;
z-index:1;
left: 9px;
top: 584px;
visibility: visible;
}
.definicion {
font-family: "Arial Black", Gadget, sans-serif;
font-size: 9px;
color: #FFF;
}
#google {
position:absolute;
width:200px;
height:115px;
z-index:0;
left: 805px;
top: 11px;
visibility: hidden;
}
</style>

Alguien sabe que es lo que puede estar ocurriendo?

[webmetrics]

Asi viendo solo el codigo css no sabria decir. Si nos muestras la parte de la estructura html.

A lo mejor tienes alguna etiqueta div sin cerrar y te provoca que se monten unas con otras.

[deirdre]

Hola rulide

Tal como dice webmetrics, es bien difícil darte una orientación para solucionar tu problema sin ver la estructura de tu html y css.

Pero como idea básica te diré que la posición absoluta siempre se ajusta a su contenedor que debe llevar posición relativa (si no tienes un contenedor general o parcial, también el body debe llevar posición relativa). Esto es a grandes rasgos: para respuestas concretas, mejor pon la url de tu sitio y lo vemos.

Bye

[oskarvisual]

El error esta en el z-index casi todas las capas tienen el mismo valor, cámbialos, pero recuerda que mientras mayor sea el valor, la capa se mostrara por encima de las demás que tengan menor valor.

Saludos

[emprear]

Las capas 10 - 11 -12 no solo tienen el mismo z-index sino el mismo tamaño y posición, y ninguna esta oculta, cual es el objeto?


Saludos