Eléments absolu masqué sur IE7, dans le header

Bonjour,

Je rencontre un problème de mise en forme insoluble sur IE7, dans le header de ma page qui contient différents élément dont certains sont positionnés en absolu : recherche et barre noire.

IE7 masque ces éléments absolu, je ne comprends absolument pas pourquoi, j’ai fait de nombreux tests en supprimant/ajoutant/modifiant des éléments du header, rien n’y fait.

Aucun souci sur Firefox, Chrome, Opera, IE9 ou IE8 bien sûr…

Voici l’url où vous pourrez constater le problème : voir le carnage !

http://finalclap.free.fr/TEMP/ie7-nightmare/screenshot/i-want-to-kill-ie7.png

Je tiens à préciser que je ne peut pas modifier l’ordre des éléments dans le code HTML pour des raisons d’accessibilité (je suis contraint par les spécifications :s).

Merci

tu n'a pas besoin de le positionner en absolute la div noire dans ton exemple.

Si toutes fois on te force à le faire, tu peux lui ajouter un z-index.

a écrit :
Je rencontre un problème de mise en forme insoluble sur IE7

Si il est insoluble pourquoi nous poser la question ?
Modifié par ptitvincent (29 Jul 2011 - 12:07)

Le z-index j'ai déjà essayé => marche pas.

C'est vrai que pour le noir je peux faire autrement, mais pour recherche...
Et j'aimerais comprendre pourquoi ça foire, c'est quand même bien pratique le positionnement absolu !

ptitvincent a écrit :
Si il est insoluble pourquoi nous poser la question ?

Parce que je pense qu'ici il y a de meilleurs chimistes que moi .

ca foire car ie7 génère une sorte de table de calque quand tu joue sur des règles type position, float etc.
Dedans il retire sur certains éléments une propriété caché "hasLayout" qu'il met habituellement par défaut, cela a pour effet de cacher l'élément en question (souvent rencontré dans les cas ou il sort du flux de la page).

Tu peux aller voir cet article plus complet que je viens de trouver sur alsa.

Pour hacker cette propriété (car la on parle bien de hack) il suffit d'instruire le style de l'élément avec la clé suivante

.barre2
{
    zoom: 1;
}

et ainsi forcer son affichage via la propriété caché hasLayout d'ie.

Cool, merci pour cette explication, j'avais déjà entendu parler du hasLayout sans vraiment savoir ce que c'était.

Entre temps j'ai résolu le problème en intercalant des div vides avant et après mes float, et ça marche !

C'est vraiment bizarre ie7...

oui il se sont un peu chier avec cette version (même eux le disent )