28172 sujets

CSS et mise en forme, CSS3

[Résolu] IE6 : hauteur de page qui se repositionne en cours de session

J'utilise la technique des colonnes factices pour afficher deux colonnes de même hauteur.

Sous IE lors du chargement de la page, mes 2 colonnes sont de la même hauteur, le pied de page correctement positionné.
Cependant dès que je passe la souris sur un élément de ma colonne de droite, la hauteur de la page est recalculé tronquant mon bas de page pour le mettre à la hauteur de la colonne de droite.
La structure de ma page est la suivante :

<div id="conteneur">

	<h1 id="header"> </h1>
		<ul id="menu">

		</ul><!-- #menu -->
	<div id="centre">
		<div id="contenu">
                     <div id="chemin_fer">

                     </div><!-- #chemin_fer -->
                     <div id="post">

                     </div><!-- #post -->
                </div><!-- #contenu -->

		<div id="menudroite">

  	        </div><!-- #menudroite -->
	</div><!-- #centre -->

        <p id="footer">......</p>

</div><!-- #conteneur -->

Du côté CSS cela donne ça

#conteneur {
	width: 900px;
	margin: 0 auto;
	margin: 0 auto ;
}

#centre {
	background: url(images/white_col.png) repeat-y;
	width: 100%;
	overflow: auto;
}

#contenu {
	float: left;
	width: 560px;
	padding: 0 30px 0 100px ;
	background: url(images/bg_page.gif) no-repeat 15px 15px ;
	min-height: 500px;
}

#menudroite {
	margin-left: 680px;
	margin-right: 20px;
	padding: 12px 0;
}


et côté hack IE6

body {
	position: relative;
	}
#centre {
	overflow: visible;
	height: 1%;
}
#contenu {
	height: expression(this.height >= this.height < 500 ? 500 : true);
	display: inline;
}


Il va s'en dire que l'affichage est correct sous FF et Safari
Modifié par Babali (17 Feb 2009 - 09:29)
C'est effectivement un problème de HasLayout. J'ai rajouté sur la colonne de droite un 
zoom:1;

dans la feuille de style IE et cela à l'air de fonctionner.

Je poursuivrai les tests pour être sur que le reste fonctionne correctement.

merci Florent
Sujet clos
Aller à