Discussion :

[rinuom99]

Bonjour,

j'ai un petit souci sous IE6, pour ne pas trop parler voici les images,

sous FF


sous IE6



pour le code CSS

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
div#adminmenucontainer {
	width:705px;
	margin:0px;
	clear:both;
	float:none
}
div.adminmenuimg {
	width:127px;
	height:101px;
	margin:5px;
	border: 1px solid #eae6dd;
	float:left
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
id="adminmenu">
      		          <div class="adminmenuimg"><a href="utilisateurs/index2.php"><img id=0 src="images/menu_admin.png" width="127" height="101" border="0" onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des administrateurs</span>';" onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion des administrateurs" /></a></div>
      		<div class="adminmenuimg"><a href="maire/index2.php"><img id=1 src="images/menu_lettre.png" width="127" height="101" border="0" onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Mot du président de l\'APC</span>';" onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Mot du président de l\'APC" /></a></div>
      		<div class="adminmenuimg">
            <a href="projets/index2.php"><img id=2 src="images/menu_projets.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Projets</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion du site</span>';" alt="projets"></a>
            </div>
      		<div class="adminmenuimg"><a href="rubriques/index2.php"><img id=3 src="images/menu_surchamp.png" width="127" height="101" border="0" onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Rubriques</span>';" onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion du site</span>';" alt="Rubriques" /></a></div>
....

donc je cherche comment éliminé le saut de ligne sous IE6 !?
merci d'avance

[c_s_s]

Bonjour,

Le code que tu fournis ne doit pas être assez complet car je ne reproduis pas ce qui apparaît dans les images.

D'ailleurs, dans le CSS on voit un bloc #adminmenucontainer alors que dans le HTML, il y a un bloc #adminmenu.

Peux-tu mettre un code HTML/CSS complet ou donner un lien vers une page en ligne ?

Merci

[rinuom99]

oui oui je m'excuse, j'ai pas fait attention
donc le code,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
div#adminmenucontainer {
	width:705px;
	margin:0px;
	clear:both;
	float:none
}
div#adminmenu {
	width:565px;
	margin:0 0 80px 80px;
	clear:both;
	float:none
}
 
 
div.adminmenuimg {
	width:127px;
	height:101px;
	margin:5px;
	border: 1px solid #eae6dd;
	float:left
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
 <div id="adminmenucontainer">
       <div id="adminmenu">
             <div class="adminmenuimg">
  <a href="utilisateurs/index2.php"> <img id=0 src="images/menu_admin.png"     width="127" height="101" border="0" 
 onmouseover="swapImages(this.id, 1);  document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des administrateurs</span>';"  onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';"  alt="Gestion des administrateurs" /> </a></div>
 
      		<div class="adminmenuimg">
<a href="maire/index2.php"><img id=1 src="images/menu_lettre.png" width="127" height="101" border="0" 
onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Mot du président de l\'APC</span>';" onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Mot du président de l\'APC" /></a></div>
      		<div class="adminmenuimg">
            <a href="projets/index2.php">
<img id=2 src="images/menu_projets.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Projets</span>';" 
onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion du site</span>';" alt="projets"></a>
            </div>
      		<div class="adminmenuimg">
<a href="rubriques/index2.php"><img id=3 src="images/menu_surchamp.png" width="127" height="101" border="0" 
onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Rubriques</span>';" 
onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion du site</span>';" alt="Rubriques" /></a></div>
            <div class="adminmenuimg">
            <a href="adresses/index2.php">
<img id=4 src="images/menu_adress.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des adresses utile</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion des adresses utile"></a>
            </div>
 
            <div class="adminmenuimg">
            <a href="agenda/index2.php">
<img id=6 src="images/menu_agenda.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion de l\'agenda</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion de l'agenda"></a>
            </div>
           <div class="adminmenuimg">
            <a href="annonces_services/index2.php">
<img id=7 src="images/menu_services.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des annonces</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion des annonce"></a>
            </div>
             <div class="adminmenuimg">
            <a href="news/index2.php">
<img id=8 src="images/menu_news.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des news</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="gestion des news"></a>
            </div>
 
....
</div>
          </div>

[c_s_s]

Bonjour,

Le décalage sous IE6 peut-être lié à des espaces dans le code.

Je te conseille de mettre le code d'un bloc #adminmenuimg sur une seule ligne, sans espace entre les balises, comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div id="adminmenucontainer">
	<div id="adminmenu">
		<div class="adminmenuimg"><a href="utilisateurs/index2.php"><img id="0" src="images/menu_admin.png"  width="127" height="101" border="0" onmouseover="swapImages(this.id, 1);  document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des administrateurs</span>';"  onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';"  alt="Gestion des administrateurs" /></a></div>
		<div class="adminmenuimg"><a href="maire/index2.php"><img id="1" src="images/menu_lettre.png" width="127" height="101" border="0" onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Mot du président de l\'APC</span>';" onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Mot du président de l\'APC" /></a></div>
		<div class="adminmenuimg"><a href="projets/index2.php"><img id="2" src="images/menu_projets.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Projets</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion du site</span>';" alt="projets" /></a></div>
		<div class="adminmenuimg"><a href="rubriques/index2.php"><img id="3" src="images/menu_surchamp.png" width="127" height="101" border="0" onmouseover="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Rubriques</span>';" onmouseout="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion du site</span>';" alt="Rubriques" /></a></div>
		<div class="adminmenuimg"><a href="adresses/index2.php"><img id="4" src="images/menu_adress.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des adresses utile</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion des adresses utile" /></a></div>
		<div class="adminmenuimg"><a href="agenda/index2.php"><img id="6" src="images/menu_agenda.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion de l\'agenda</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion de l'agenda" /></a></div>
		<div class="adminmenuimg"><a href="annonces_services/index2.php"><img id="7" src="images/menu_services.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des annonces</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="Gestion des annonce" /></a></div>
		<div class="adminmenuimg"><a href="news/index2.php"><img id="8" src="images/menu_news.png" width="127" height="101" border="0" onMouseOver="swapImages(this.id, 1); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Gestion des news</span>';" onMouseOut="swapImages(this.id, 0); document.getElementById('menutitrespan').outerHTML='<span id=menutitrespan>Administration du site</span>';" alt="gestion des news" /></a></div>
	</div>
</div>

De cette façon, sous IE6, je en vois plus de décalage.

[Bisûnûrs]

Ou alors de mettre vertical-align:bottom sur les images.

Au passage, tu sembles avoir le bug du doublement des marges sur IE6 aussi, sur la classe adminmenuimg.

[rinuom99]

c_s_s, Bisûnûrs Merci beaucoup j'ai essayé avec vertical-align:bottom, sa marche, merci encore une fois