Discussion :

[ech0s]

Bonjour à tous !
Je suis confronté à un problème de compatibilité entre IE et Firefox.
J'ai un tableau avec les flèches qui permettent de trier les colonnes (voir image).



Le résultat sous Firefox est ce que je recherche à faire, et en dessous ce que IE comprend.

Voici mon code CSS :

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
 
#tableau_mesures1_libellecapteur{
	min-width:170px;
	width: 170px;
	position:relative;
	float: left;
	background-color: 0x369874;
	top:0px;
	left:15px;
	z-index:50;
}
#tableau_mesures1_flechebas{
	min-width:20px;
	width: 15px;
	position:relative;
	float:left;
	height:15px;
	z-index:100;
	left:-10px;
}
#tableau_mesures1_flechehaut{
	min-width:20px;
	width: 15px;
	position:relative;
	float:left;
	height:15px;
	top:5px;
	z-index:90;
}

Le libellé est dans un div, ainsi que chaque flèche car elles sont associées à un formulaire chacune.
Auriez-vous une solution pour aligner les flèches sous IE comme sous Firefox ?

Merci d'avance !

[Invité]

Bonjour,
ton code html (simplifié) permettrait de tester...

A vue de nez, je dirais : position:absolute;

[ech0s]

Oui le voici en simplifié (avec une seule ligne où il y a le problème):

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
41
42
 
<table id="tableaumesures_sens1_cli35" class="tableaumesures_sens1 draggable">
 
    <tbody class="ui-sortable">
         <tr id="2" class="tableaumesures_row_mesures">
               <td class="tableaumesures_row_capteur_courbe">
                    <div id="tableau_mesures1_libellecapteur">Humidité (%)</div>
                    <div id="tableau_mesures1_flechehaut">
                         <form method="post" action="tableau_mesures_intermediaire.php">
                    </div>
                    <div id="tableau_mesures1_flechebas">
                         <form method="post" action="tableau_mesures_intermediaire.php">
                    </div>
               </td>
               <td id="3" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=79">97.8</a>
                    </div>
               </td>
               <td id="1" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=77">99.8</a>
                    </div>
               </td>
               <td id="0" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=76">93.7</a>
                    </div>
               </td>
               <td id="4" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=80">67.8</a>
                    </div>
               </td>
               <td id="2" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=78">71.4</a>
                    </div>
               </td>
          </tr>
     </tbody>
</table>

Et voici les flèches :

[Invité]

On ne voit pas tes flèches dans ton code

[ech0s]

Là ça devrait être bon :

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
41
42
43
44
45
46
47
48
49
 
 
<table id="tableaumesures_sens1_cli35" class="tableaumesures_sens1 draggable">
 
    <tbody class="ui-sortable">
         <tr id="2" class="tableaumesures_row_mesures">
               <td class="tableaumesures_row_capteur_courbe">
                    <div id="tableau_mesures1_libellecapteur">Humidité (%)</div>
                    <div id="tableau_mesures1_flechehaut">
                         <form method="post" action="tableau_mesures_intermediaire.php">
<input width="10" type="image" height="10" style="cursor:pointer;" alt="arrow_down" src="../img/arrow_up.png">
</form>
                    </div>
                    <div id="tableau_mesures1_flechebas">
                         <form method="post" action="tableau_mesures_intermediaire.php">
<input type="hidden" value="1" name="order">
<input type="hidden" value="1" name="numLigne">
<input width="10" type="image" height="10" style="cursor:pointer;" alt="arrow_down" src="../img/arrow_down.png">
</form>
                    </div>
               </td>
               <td id="3" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=79">97.8</a>
                    </div>
               </td>
               <td id="1" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=77">99.8</a>
                    </div>
               </td>
               <td id="0" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=76">93.7</a>
                    </div>
               </td>
               <td id="4" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=80">67.8</a>
                    </div>
               </td>
               <td id="2" class="tableaumesures_mesure_capteur_courbe">
                    <div id="tableaumesures1_val">
                         <a href="diagram.php?client=35&cap=2&sta=78">71.4</a>
                    </div>
               </td>
          </tr>
     </tbody>
</table>

[Invité]

Il faut imbriquer tes 2 div (flèches) DANS le div "libellé :

Code html :

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

1
2
3
4
5
6
7
8
<div id="tableau_mesures1_libellecapteur">Humidité (%)
	<div id="tableau_mesures1_flechehaut">
		 <form><!-- ... --></form>
	</div>
	<div id="tableau_mesures1_flechebas">
		 <form><!-- ... --></form>
	</div>
</div>

Et passer en absolute :

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
15
16
17
18
19
20
21
22
#tableau_mesures1_libellecapteur{
	position:relative;
	width: 170px;
	background-color: 0x369874;
	z-index:50;
}
#tableau_mesures1_flechebas{
	position:absolute;
	width: 15px;
	height:15px;
	z-index:100;
	top:5px;
	right:20px;
}
#tableau_mesures1_flechehaut{
	position:absolute;
	width: 15px;
	height:15px;
	top:-4px;
	right:5px;
	z-index:90;
}