28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je travaille ce site sur une base joomla en ce moment : http://esencia.a51.fr/
J'ai un pépin sur IE7 que je n'arrive pas du tout à comprendre.
Les sous-menus (ya des sous-menus sous les entrées gamme et société) restent cachés par le bloc animé qui se trouve dessous sous IE7 alors que tout se passe bien sur les autres navigateurs testé (FF Chrome, Safari, IE8. Pour info j'ai mis IE6 hors-jeu, yen a marre !)

J'ai essayé de modifier pas mal de valeurs de z-index sans succès, si vous aviez une idée de l'origine du problème ça me rendrait un fier service...
Est-ce z-index, overflow ??? quoi donc ?

Merci à vous Smiley smile
Modifié par elfif (23 Jul 2010 - 14:53)
Un petit up sur ce sujet car je ne trouve vraiment pas la réponse à ma question. J'ai tenté de placer d'autres systèmes de menus déroulants à la place de celui-ci, même constat. Le sous menus reste caché, sous IE7 seulement par le bloc animé des verres qui se trouve juste dessous.

C'est très frustrant de ne pas comprendre où est le pépin !

D'autant que sur un autre site en cours de dev (http://bgi.a51.fr/) qui utilise le même système de bloc d'animation le menu et ses sous-menus fonctionnent bien ensemble.
Salut,

Si tu veux jouer avec les z-index, il faut que tes blocs soient positionnés (relative par exemple sur #slider div a tester).

Bon courage
Je viens de coller tout plein de position:relative; sur les différents niveaux de blocs, mais rien ne change sous IE7.

Je fais ces modifs dans une feuille de style conditionnelle spécifique à IE7.

D'ailleurs pour ne pas être embrouillé par un bloc trop chargé, j'ai simplifié le contenu qui apparaît sous mon menu pour ne mettre qu'une simple image.
J'ai TOUJOURS ce satané menu qui reste caché.

Ca m'énerffffe Smiley fache
Solution trouvée grâce à cette page :
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

Un vrai bug de IE7...

Pour résoudre mon problème, j'ai ajouté une classe "ie7wrap" à ma div de placement "wrapper" comme ci-dessous et dans ma feuille css spécifique ie7 j'ai indiqué une valeur de z-index au dessus de tous les autre blocs pour ce ie7wrap :
[B]ie7.css[/B]
div.ie7wrap { position: relative; z-index: 3100; }

[B]index.php[/B]
<div class="wrapper [COLOR="Red"]ie7wrap[/COLOR]">
    <div id="div_menu">
        <ul id="menu">
            <li><a href="#">Lien 1</a>
                <ul class="sousmenu">
                    <li><a href="#">Sous-menu</a></li>
                    <li><a href="#">Sous-menu</a></li>
                    <li><a href="#">Sous-menu</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<div class="wrapper">
    <div id="contenu">
        <div id="element_en_absolu">Le sous menu passe derrière !</div>
    </div>
</div>