[ résolu ] Une espace infernale entre 2 divs verticalement parlant

Bonjour

J'ai un problème avec une espace entre 2 divs dans IE6

sur la page http://www.delasalle-nimes.fr/college-prive-nimes/college-prive-nimes-projet.php
à droite il y a un bloc-notes formé de 3 divs empilés verticalement et ça marche parfaitement dans FF et IE7 mais dans IE6 il y a une espace

J'ai essayé plein de trucs trop nombreux pour l'enlever mais rien à faire

le html est comme ceci :

				<div id="right">
								
					<div id="right-top"></div><!-- END right-top -->

					
					<div id="right-mid">					
						
						<ul id="right-list">	

<li class="violet"><a href="college-prive-nimes-actualite?sub_id=1">Le Brevet des Collège offert à tous cette année</a></li><li class="blue"><a href="college-prive-nimes-actualite?sub_id=3">Le Club Olympique Lasallien contre l’OM vendredi soir au stage Jean Bouin</a></li><li class="green"><a href="college-prive-nimes-actualite?sub_id=2">Le Cross reporté au lundi 20 octobre</a></li><li class="orange"><a href="college-prive-nimes-actualite?sub_id=4">Inscription pour les activités artisitiques tous les jours entre 12h30 et 14 h</a></li><li class="red"><a href="college-prive-nimes-actualite?sub_id=30">Le Forum de la vie reçoit Nicolas Hulot</a></li>							

							
							
						</ul>						
						
						
						
						<a href="college-prive-nimes-dyn/nameOfOtherFile.pdf" target="_blank" title="cliquer pour voir le programme de la semaine en fichier pdf">	
																	
					<div id="right-semaine"><img src="college-prive-nimes-images/college-prive-nimes-semaine.gif" id="contact-img" alt="" onMouseOver="swapImg(this, 'college-prive-nimes-images/college-prive-nimes-semaine-over.gif');" onMouseOut="swapImg(this, 'college-prive-nimes-images/college-prive-nimes-semaine.gif');" style="border:0;">
					
						</div></a>
						
						
						<div id="semaine-dates" style="border:0;">
							<a class="semaine-link" href="college-prive-nimes-dyn/nameOfOtherFile.pdf" target="_blank" title="cliquer pour voir le programme de la semaine en fichier pdf">du 22 janvier<br />

au 27 janvier</a>
						</div>
						
						
					</div><!-- END right-mid -->
					
					<div id="right-bot">
					</div><!-- END right-bot -->
					<br clear="all"/>					
				</div><!-- END right -->

et le css comme ceci :

#right{
	width:180px;
	float:right;
}

#right-top{
	width:180px;
	height:58px;
	background-image:url(college-prive-nimes-images/college-prive-nimes-right-top.jpg);
	background-repeat:no-repeat;
	float:right;
}

#right-mid{
	width:180px;
	background-image:url(college-prive-nimes-images/college-prive-nimes-right-mid.jpg);
	background-repeat:repeat-y;	
	padding:20px 0px 40px 0px;
	float:right;
}

#right-bot{
	width:180px;
	height:16px;
	background-image:url(college-prive-nimes-images/college-prive-nimes-right-bot.jpg);
	background-repeat:no-repeat;
	float:right;	
}

#right-semaine{
	width:180px;
	/*height:73px;*/
}

ul li {
	margin:0;
	border:0;
	padding:0;
}

#right-list{
	list-style-type:none;
	margin-left:14px;
	width:160px;
	margin-bottom:16px;
	font-weight:normal;
}

#right-list li{
	display:list-item;
	padding-left:20px;
	margin-bottom:4px;
	line-height:14px;
	background-repeat:no-repeat;
	background-position:0px 3px;	
}

#right-list a{
	font-size:12px;
	color:#000000;
	text-decoration:none;
}

#right-list a:hover{
	color:#B3281B;
	text-decoration:underline;
}

#semaine-dates{
	margin-left:60px;
	font-size:14px;
	color:#000000;
	font-weight:bold;
	margin-bottom:20px;
}

a.semaine-link{
	font-size:14px;
	color:#000000;
	font-weight:bold;
	text-decoration:none;
}

a.semaine-link:hover{
	color:#CC0000;
	font-weight:bold;
	text-decoration:none;
}

Est-ce que quelqu'un voit d'où le problème pourrait venir ??

Merci d'avance
Modifié par carlsberg (22 Mar 2007 - 10:40)

Salut,
pfouilleouilleouille, pas facile à lire ton code mais, arrête-moi si je me trompe (je n'ai pas IE6), le décalage se produit autour de l'image avec le rollover non ?
Si oui, deux solutions :
- mets bien le </div> qui suit l'image collé au </img>, et oui, je sais, ça a l'air bête comme ça mais c'est spécial IE
- utilise

 img { display: block; }

soit pour toute la css auquel cas tu devras de temps en temps mettre des display inline pour gérer les alignement horizontaux, soit juste pour ce div

Have swing

Rien à voir avec cette histoire d'espace récalcitrant, mais un script JS sur ta page fait ramer affreusement Firefox 2 chez moi (Firefox 2.0.0.2 sous linux).

Je ne sais pas si c'est un bug Firefox, si on retrouve le même sous d'autres systèmes, etc., mais il est probable qu'il y ait un script pas tip top utilisé sur la page. Genre le machin du défilement de texte, par exemple.

oui, c'est vrai, Aka a raison, sous IE, pas de problème mais sous FF, ça fait gravement chauffer la CPU, le ventilo travaille.
Effectivement c'est sûrement le script de scoller, très à l'ancienne (dynamicdrive, c'était top à la fin des années 90 non, je déconne, enfin...)
Perso, si j'étais toi je me pencherais un poil sur quelques librairies plus récentes (mootools ou autres, qui font ce genre de truc de façon élégante, légère et non intrusive) mais, je le reconnais, ça suppose de se prendre un peu le chou.

Have swing
Modifié par virtualgadjo (21 Mar 2007 - 20:36)

merci pour vos réponses

- ok, je vais essayé le display:block sur le img - demain, je pense - ça suffit pour aujourd'hui

- et puis oui je sais que ce scroll de texte est pénible - c'est imposé et je l'avais déjà dans ma collec' de bouts de code - une fois le site a peu près terminé j'irais voir si je ne trouve pas qqchose de mieux

je vous tiens au courant

merci et bonne soirée

c'était pas ça

j'avais tout essayé et j'étais pret à me pendre alors que j'ai eu l'idée de mettre un clear sur la colonne centrale de contenu - et bingo ça marche !

reste à voir pour le scroller de texte en js - j'ai regardé mootools vite fait - très interessant mais j'ai l'impression que ça va me prendre du temps pour la prise en main - alors ça sera pour la suite ...

merci en tout cas