[Résolu] Problème de chevauchement de div sous IE7

Bonjour,

Voici l'énoncé de mon problème sur lequel j'ai passé une partie de ma nuit :

J'ai des paragraphes (encapsulés par des div) qui apparaissent lorsqu'on on clique sur une image.
Le contenu de ces paragraphes est variable (créé dynamiquement en php).
Lorsque je fais apparaitre un paragraphe alors que le précédent est déjà visible, les lignes du second paragraphe chevauchent les lignes du premier.

Ce comportement n'apparait que sous IE7 (fonctionne en IE6, FF, Safari, Chrome).

Voici le code traduit en html

<form name="formulaire" method="POST">
	<div id="dropper6" class="dropper" style="display:none;">
			<h2>Selection 1</h2>
				<ul class="menu_selection">
					<li><label for="chk">Item 1</label><input type="checkbox" name="chk1" value="Item 1" onclick="verifchk();" /></li>
					<li><label for="chk">Item 2</label><input type="checkbox" name="chk2" value="Item 2" onclick="verifchk();" /></li>
					<li><label for="chk">Item 3</label><input type="checkbox" name="chk3" value="Item 3" onclick="verifchk();" /></li>
				</ul><!-- menu_selection -->
	</div><!-- #dropper6 --> 
		<div style="clear:left;"></div>	
	<div id="dropper7" class="dropper" style="display:none;">
			<h2>Selection 2</h2>
				<ul id="menu_selection">
					<li><label for="chk">Item 4</label><input type="checkbox" name="chk7" value="Item 4" onclick="verifchk();" /></li>
					<li><label for="chk">Item 5</label><input type="checkbox" name="chk8" value="Item 5" onclick="verifchk();" /></li>
					<li><label for="chk">Item 6</label><input type="checkbox" name="chk9" value="Item 6" onclick="verifchk();" /></li>
				</ul><!-- menu_selection -->
	</div><!-- #dropper7 --> 		
		<div style="clear:left;"></div>	
</form>	

et pour la partie CSS :

ul.menu_selection li LABEL {
	DISPLAY: inline-block; 
	PADDING-BOTTOM: 1px; 
	VERTICAL-ALIGN: 3px; 
	WIDTH: 145px; 
	BORDER-BOTTOM: #c6c0ac 1px dotted;
	TEXT-ALIGN: left;
	text-indent: 15px ;
}

ul.menu_selection
{
	width: 550px ;
	height: 18px ;
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
}
ul.menu_selection li
{
	float: left ;
	width: 180px ;
}

Je suis preneur de toute idées

NB : ce dysfonctionnement est visible sur mon site
Modifié par Babali (04 Jun 2010 - 09:19)

Hello


Et voilà pour IE7 :
(j'ai juste mis la css du menu ^^)

Le problème vient je pense du fait qu'IE n'interprète pas les padding pareil que firefox

Essaie ça dans ta css (enfin la dernière ligne) :

/*
-------------------
TEST POUR SOUS MENU
-------------------
*/

#menu li ul{
	display:none;
	list-style-type:none;
	padding:0;
	width: 180px;
	position:relative;
	background-image:none;
	margin:0;
	/*margin-top:-4px;*/
}

* +html #menu  li ul{
margin-left:-90px;
}

* +html est un hack css qui ne fonctionne que sous IE7 que j'utilise pour tester des petites modifications rapides. Pour faire plus "propre" il faut que tu crée une css alternative IE7 (comme tu l'as fait pour IE6) avec ton code

#menu  li ul{
margin-left:-90px;
}

J'espère que ça fonctionne
Modifié par saiko_sama (02 Jun 2010 - 10:06)

Merci pour la réponse.
J'ai ajouté un hack sur ma feuille IE7 et j'ai travaillé sur le padding et le margin des div :

* +html .dropper { 
	} 

mais malheureusement, ça continue à coincer, j'ai l'impression que les div ne s'affiche pas dans le flux les uns en dessous des autres

Étrange.

Perso je n'ai touché qu'à cette ligne pour faire fonctionner correctement j'ai laissé le reste du code comme il était sur les deux liens qui figuraient dans ton post avant :

#menu  li ul{ 
margin-left:-90px; 
} 

je lui dit juste de décaler le menu de 90px vers la gauche pour contrecarré le décalage, j'ai laissé tes paddings et margin comme ils étaient

Par contre si tu fais une feuille de style IE7 avec des commentaires conditionnels tu as pas besoin du hack css

Le chevauchement que je constate est un chevauchement du div du bas sur le div du dessus.

tu peux le voir en ligne ici
http://www.couleurkemia.fr/recette-ingredient.html

ou en image

j'ai ajouté à ma classe dropper

.dropper { 
	overflow: auto;
	clear: both;
	position: relative;
} 

rien n'y fait, en overflow auto, j'ai des barres de défilement qui apparaissent ... oups
Modifié par Babali (02 Jun 2010 - 15:19)

Humm on dirait encore un souci de margin / padding

Tu as essayé de donner une margin-bottom à ton .dropper pour IE7 pour voir ce que ça donne ?

J'ai essayé un margin-bottom , mais cela n'influe pas sur la dimension de la div.

J'ai l'impression que la div ne s'étend pas et comme j'ai un overflow visible, je continue à voir le texte.

Bon, j'ai essayé plusieurs choses en me focalisant sur les overflow et clear: both; sans résultat.

L'architecture de ma page est la suivante :

<body>
<div id="conteneur">
	<div id="centre">
		<div id="contenu">
			<form name="formulaire" action="#" method="post">
					<div id="dropper1" class="dropper" style="display:none;">
							<ul class="menu_selection">
							</ul><!-- #lien -->
					</div><!-- #dropper1 -->
							<div style="clear:left;"></div>	
			</form>
		</div><!-- #contenu -->
	</div><!-- #centre -->
</div><!-- #conteneur -->

côté css de base

#conteneur {
	width: 900px;
	margin: 0 auto; 
	text-align: left ;
}

/* Bloc central */
#centre {
	width: 100%; 
	overflow: auto;
}

#contenu {
	float: left; 
	width: 560px;
	padding: 0 30px 0 100px ;
	min-height: 500px;
}

et ma css IE7

body {
	position: relative;
	}
/* Bloc central 
 #centre {
	overflow: visible;
	height: 1%;
}*/
.dropper { 
	float:right;
	clear: both;
	margin-bottom : 10px;
} 

j'ai passé le "centre" en hidden mais rien n'y fait.

si vous avez une piste je suis preneur !

Bon, je crois que je peux m'auto-congratuler !
Après plusieurs heures de recherche j'ai enfin trouvé la cause de mon problème !

La partie qui ne s'étendait pas était celle là :

<ul id="menu_selection"> 
                    <li><label for="chk">Item 4</label><input type="checkbox" name="chk7" value="Item 4" onclick="verifchk();" /></li> 
                    <li><label for="chk">Item 5</label><input type="checkbox" name="chk8" value="Item 5" onclick="verifchk();" /></li> 
                    <li><label for="chk">Item 6</label><input type="checkbox" name="chk9" value="Item 6" onclick="verifchk();" /></li> 
                </ul><!-- menu_selection --> 

En effet le <li> sont en float !
j'ai donc intégré dans le conteneur de ce <li>

ul.menu_selection
{	clear:both; width: 100%; overflow: auto; height: 1%; 
}

Et là miracle cela fonctionne sous FF IE7, safari et chrome mais pas sous IE6
donc dans mon css spécifique à IE6

ul.menu_selection
{
	overflow: visible; 
}

Je ne sais pas si c'est très académique mais en tout cas ça fonctionne sur toutes ces plateformes.

J'ai donc résolu mon problème (comme quoi en cherchant )

Note à retenir pour la prochaine fois : Penser à vider le cache d'IE pour éviter de passer une mauvaise nuit en pensant avoir corrigé le bug en local, alors qu'une fois mise en ligne le bug est toujours présent !