[resolu] Jquery position() : valeu de retour différents IE/Webkit/FF

Bonjour,

Le contexte :
J'ai un tableau et au survol d'un <td> je dois afficher une image au dessus de la colonne de ce <td>.
Il faut que cette image soit centrée par rapport à la colonne.

Pour cela je me base sur le positionnement des colonnes avec la fonction jquery : .position()

Voici la structure html (allégée):

<table id="location-tarif">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>

<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
</tbody>
</table>

le javascript :

$("#location-tarif tbody").delegate('td','mouseover mouseleave', function(e) {
	if (e.type == 'mouseover') {
	  $(this).parent().addClass("active");
	  
	 // récupére la position de la colonne par rapport au tableau.
	  var posCol = $("#location-tarif colgroup").eq($(this).index()).addClass("active").position();
	  
	  var leftPosTip = parseInt(posCol.left, 10) - (112 - ($(this).width() / 2));
	 // alert(posCol.left + ' | ' + $(this).width() / 2 + ' | ' + leftPosTip);
	  var colClass = $(this).attr('class');
	  $("#location-tarif th." + colClass + " > span")
		.css({'left' :  + leftPosTip + 'px' })
		.show();
	}
	else {
	  $(this).parent().removeClass("active");
	  $("#location-tarif colgroup").eq($(this).index()).removeClass("active");
	  $("#location-tarif th > span").hide();
	}
});

au niveau css :

table { 
	margin: 10px 0 0 0;
	background-color: #fff;
	width: 100%;
}
#location-tarif tbody td {
	text-align: right;
	width: 90px;
	text-shadow: 1px 1px 0 #fff;
}

Cela fonctionne avec Firefox, mais pas Webkit et IE.
Pour les deux derniers la valeur "left" renvoyée par .position() n'est pas celle qui devrait être. A savoir l'espacement de n pixels par rapport au parent.

Pouvez vous m'aider ?

Bon ben c'est bon, au lieu de me baser sur la position de <colgroup> je me suis basé tout simplement sur la position du <td>
Modifié par 513 (12 Aug 2011 - 20:03)