Comunidad de diseño web y desarrollo en internet online

IE7 SUX: CSS, z-index, li:hover, menú y aneurismas varias

Citar            
MensajeEscrito el 07 Ene 2008 10:31 pm
EStaba haciendo un menú feliz de la vida en CSS, y para ser más exactos, éste: http://www.alistapart.com/articles/horizdropdowns/

Todo iba bien hasta que me topé con un error gigante. En mi página web, el menú pasa encima de un iCarousel con las propiedades "position: relative" y "position: absolute", necesarias para su funcionamiento.

Si las saco, iCarousell no funciona (no hay animación) y el menú pasa por encima. Si las coloco, el menú se esconde abajo de las imágenes. Esto se soluciona parcialmente colocando z-index en iCarousell o el div que esté haciendo conflicto, superponiéndose al menú. La otra solución total es simplemente evitar el uso de position relative y absolute.

El problema es que en FireFox funciona (como esperabais), pero en el Internet Explorer sigue igual. Lamentablemente necesito el menú (sino, no se puede navegar en la web), buh...

El problema es exactamente éste, y lo pueden ver en acción aquí:



¿Alguien tiene una idea sobre cómo arreglar ésto? Lo más salomónico sería optar por hacer lo mismo en flash, pero es un bodrio hacerlo fácilmente actualizable.

Por DarkGhostHunter

2 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 08 Ene 2008 12:03 am
Para el segundo DIV, el problemático... ¿es necesario darle posición:relative?
Habrás notado... que sin ella (aunque sólo se omita en el segundo), adiós al problema.

De todas maneras...
he reescrito de otra manera, metiendo un nuevo contenedor para los tres.
Si el problema aparecía al haber un div "último"... ¿por qué no hacer "último" el que sufre el problema?

¿Te vale así?
<style type="text/css">
.base {position: relative;
______width: 200px;
______border: 1px solid black;
______z-index: 1;
_____}
.inside {position:absolute;
_______left:0; top:0px;
_______width: 100px;
_______border: 1px solid red;
_______background: gray;
_______z-index: 1000;
______}
.cont {position: relative;
______border: 1px solid green;
_____}
</style>
<body>
<div class="uu">
<div class="base">This has some text in it.</div>
<div class="base">This is the second div.</div>
<div class="inside">This has some more text in it, also has a backgroundand a higher z-index.</div>
</div>
</body>
NOTA: Marco en rojo, el nuevo código que introduzco/modifico.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.