Aligner images tableau IE

Version imprimable

1 pièce(s) jointe(s)

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).

Pièce jointe 95128

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

Voici mon code CSS :
Code:

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 !

15/05/2012, 09h42
Invité

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

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

2 pièce(s) jointe(s)

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

Code:

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 :
http://www.developpez.net/forums/att...1&d=1337068268

http://www.developpez.net/forums/att...1&d=1337068278

15/05/2012, 10h02
Invité

On ne voit pas tes flèches dans ton code :koi:

Là ça devrait être bon :

Code:

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>

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

Code:

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:

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;
}

15/05/2012, 10h35
ech0s

C'est bon ça marche impeccable merci beaucoup !
Il y avait juste un léger décalage de 5px des fleches entre Firefox et IE mais du coup je les ai plus décalées sous Firefox pour que ça aille sous IE.

Merci :D