Bonjour,

J'ai du mal à comprendre ce qui se passe. J'ai créé une page contenant d'un côté une carte et de l'autre une liste d'acteurs. Lorsque l'on passe la souris sur les acteurs, un rond css se positionne sur la carte (exemple).
La page a été testée sous les dernières versions de Chrome, Opera, Safari et IE, FF. Pour les 3 1er, chacun des 9 acteurs se positionne parfaitement. Pour IE et FF, très bizarrement, le 8ème et 9ème acteur sont décalés vers le bas et uniquement ceux-là.

Le code est assez simple :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<div class="bulle_carte" style="margin-top:<?php echo $element_infoRight['elements_position_top']; ?>px; margin-left:<?php echo $element_infoRight['elements_position_left']; ?>px;">
<?php echo $element_infoRight['elements_ordered']; ?>
</div>
(Dans la base de données, chaque enregistrement d'acteur est composé, entre autre, d'un champ "margin-top" et "margin-left", permettant de positionner les acteurs sur la carte via l'administration du site, en changeant les valeurs des champs.)

  • la class="bulle_carte"

Code style : 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
.bulle_carte {
	width:25px;
	height:25px;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	border-radius:100px;
	border: thin solid #6E9E09;
	background-color:#6E9E09;
	position:absolute;
	color: #FFFFFF;
	text-align: center;
	vertical-align:middle;
	font-weight: bold;
	font-size:19px;
	font-family: sans-serif;
}</style>

  • le script

Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
   $('.bulle_carte').hide();
   $('.caption').hover(
 
function () {
   $(this).next().fadeIn();
   },
function () {
   $(this).next().fadeOut();
   });
 
});

Auriez-vous une idée de l'origine de ce décalage qui ne touche que 2 des 9 acteurs listés ?

Un grand merci pour votre aide !!!