Div en position absolute : invisible sous IE (OK sous FF et autres)

Bonjour,

Je suis confronté à un problème qui me semble très particulier.

Le problème est sur ce site (temporaire) : http://offline.epsigon.fr

Mes divs "zoom" et "last" s'affiche parfaitement sous FF et autres sauf sous IE6/7.

Avez-vous une idée ?

----------

Pour infos :

Mon div "pagewrapper" contient les divs (dans l'ordre dans l'html) :

- "content" en float avec un padding-top de 243px,
- "zoom" en absolute d'une hauteur de 243px,
- "last" en absolute d'une hauteur de 243px,
- "leftcol" en float (colonne de gauche),
- "rightcol" en float (colonne de droite) avec un padding-top de 243px.

J'ai d'abord positionné mes float (content, leftcol, rightcol) pour avoir trois colonnes. Ensuite j'ai rajouté aux "content" et "rightcol" un padding de 243px pour que ces deux colonnes laissent apparaitre mes deux divs "zoom" et "last".

J'utilise de fameux "IE7 Hack" pour pouvoir bénéficier des comportements "hover", des "first-child" et autres joyeusetés. Même désactivé j'ai toujours le souci sous IE 6/7.
Je tiens absolument à garder cet "IE7 Hack" (http://code.google.com/p/ie7-js/).

Voilà, merci d'avance.

Salut,

Un height: auto; ou overflow: auto; sur tes blocs #last & #zoom devrait en venir à bout, un problème de contexte de formatage.
Modifié par ghost (16 Aug 2008 - 15:45)

Re,

Je viens d'essayer avec un overflow:auto mais ça ne passe pas.

J'ai bien pensé à un problème de layout, et rajouter height:auto ne conviendrait pas car la largeur et la hauteur de mes blocs #zoom et #last sont déjà définis dans mon CSS.

Une autre idée ?

Re,

Exact, IE developer me joue des tours ...
Ce n'est pas la première fois
Modifié par ghost (16 Aug 2008 - 16:04)

Bonjour,
un petit z-index:50 (ou autre valeur) sur 'zoom' et 'last' devrait fonctionner.
Le problème doit être lié au padding-top pour 'content' et 'rightcol'.

Çà aurait été tellement simple Mais non, ça ne règle pas le problème.

Et dire que tout mon code est valide...

J'ai même supprimé le padding-top à mon #content et mon #rightcol.
Résultat sous FF : mes #content et #rightcol sont donc sous mes #zoom et #last.

Mais sous IE, les blocs #zoom et #last sont toujours absent de l'affichage.

Re,

Pour le Z-index, je n'y crois pas, je pencherais plutôt vers le clear: both; du footer
Essaye de le supprimer, d'ailleurs il ne sert pas à grand chose il me semble.

Alors, en enlevant le clear:both du #footerwrapper, mes blocs de contenu #zoom et#last sont bien positionnés sous IE 7 et FF... Enfin et merci...

Mais malheureusement mon clear:both me permettait d'avoir mon #footerwrapper sous mes colonnes #leftcol, #content et #rightcol... Là ça remonte mon footer sous Firefox.

Et sur IE6 ça devient la catastrophe.

J'ai laissé les modifications actuelles.

Pour simplifier, maintenant il n'y a que sur IE 7 que c'est OK pour moi...
Modifié par kraygoon (16 Aug 2008 - 16:52)

Re,

Bah ta mise en page est un peu usine à gaz
En l'état, il faudrait que tu sortes de footer du bloc pagewrapper, plus besoin de clear et voir quel bloc doit avoir la propriété overflow: auto;
(interfacewrapper ?)

Sinon repartir avec plus de blocs dans le flux

Bon, je vais tenter de retirer le #footerwrapper de mon #pagewrapper.

Et ma mise en page n'est pas une usine à gaz, j'ai vraiment essayé de simplifier au maximum l'html pour n'avoir que le CSS qui s'occupe de la mise en page.

J'ai également souhaité avoir un ordre spécifique des blocs dans mon html pour des raisons de SEO et de navigateurs textes.
Modifié par kraygoon (16 Aug 2008 - 17:11)

Bon, j'ai sorti mon #footerwrapper de mon #pagewrapper.

Résultat de l'opération :
OK sous Firefox
OK sous IE7
Pas bon sous IE 6

J'ai de nouveau retrouvé l'espoir.

Je me disais bien ...

bon j'ai tester ie7, FF3 opera ça tourne

#pagewrapper {
	position : relative ;
	width : 980px ;
	margin : 0 auto ;
	background : red ;
	overflow : auto ;
	}

#footerwrapper {
	position : relative ;
	width : 100% ;
	height : 118px ;
	background : black url("epsigon/style/footerwrapper-background.jpg") no-repeat ;
	}

	<div id="pagewrapper">
		<div id="content">
			<h1>Titre de la page</h1>
			
....	

	</div>
		<div id="footerwrapper">
			
		</div>
</div>
</body>

Je n'ai pas ie6 sous la main mais si c'est un problème de contexte de formatage essaye un height: 1% pour le bloc #pagewrapper...
Modifié par ghost (16 Aug 2008 - 17:22)

Nan, le height:1% ne règle pas le problème.

Merci à tous de vous attarder sur mon souci.
Modifié par kraygoon (16 Aug 2008 - 17:28)

J'ai peut-être une piste.

J'ai fais un petit bout de Javascript pour IE6 qui, à la fin du chargement de la page, cache puis affiche les #zoom et #last... Et ça marche.

Grosso modo j'ai appliqué le style visibility:hidden et desuite après le visibility:visible aux deux blocs absolute et l'affiche se passe correctement sous IE6.

Alors la solution ne me convient pas forcement mais y aurait-il un bug référencé sur IE6 de ce genre là ?

Bien que la solution ne soit pas du tout élégante, je vous la présente.

J'utilise la librairie Mootools :

	<!-- Patch de compatibilité avec IE6 et inférieur -->
	<!--[if lt IE 7]>
	<script type="text/javascript">
		window.addEvent('load', function(){
			$('zoom').setStyle("visibility","visible");
			$('last').setStyle("visibility","visible");
		});
	</script>
	<![endif]-->

En attendant mieux