Infobulle IE et affichage [Résolu]

[rps8484a]

Bonjour,

J'ai un problème d'affichage de mon infobulle avec Internet Explorer, cette dernière s'affiche cependant correctement avec Mozilla.

Voici mon code, tout d'abord le code JQuery qui me permet d'afficher :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//Infobulle
$('td.cost_channel').mouseover(function() {
 
 
	$('body').append("<span class='infobulle'></span>");
	var bulle = $(".infobulle:last");
	bulle.append("<table><th class ='sort_cost'>Sort of cost</th> <th class ='cost' colspan='2'> value</th>");
 
	bulle.append("<tr><td class='row'>Commission : </td><td class='row2'>"+$('#commission_'+id+'').val()+' </td><td>CHF</td></tr>');
 
	bulle.append('</table>');
 
	var posTop = $(this).offset().top;
	var posLeft = $(this).offset().left+$(this).width()/5;
	bulle.css({left:posLeft, top:posTop,opacity:0});
	bulle.animate({top:posTop, opacity:0.99});
});
 
$('td.cost_channel').mouseout(function() {
	var bulle = $(".infobulle:last");
	bulle.remove();
});

Et voici mon code css.

Code css :

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
.infobulle	{
	position:absolute;
	background : #0F79B1;
	padding: 5px;
	-moz-border-radius: 3px;
	-webkit-border-radius:3px;
	color:#E6E2DF;
	text-align:left;
 
	border: 1px solid #FFFFFF;
 
}
.infobulle .sort_cost	{
	width : 150px;
	text-align:left;
	color:#E6E2DF;
	font-weight:bold;
	border-bottom: 1px solid #FFFFFF;
}
.infobulle .row	{
	width : 150px;
}
.infobulle .row2	{
	width : 30px;
}
.infobulle .cost	{
	width : 50px;
	text-align:left;
	color:#E6E2DF;
	font-weight:bold;
	border-bottom: 1px solid #FFFFFF;
}

L'affichage sous IE se fait à la bonne position (par rapport à la gauche et au sommet), mais la largueur de l'infobulle va jusqu'à droite de la fenêtre et le contenu ne s'affiche pas.

Quelqu'un saurait-il ce qui ne fonctionne pas ?

[Bovino]

Il faudrait que tu revoies l'utilisation de append().
Cette méthode permet d'insérer des éléments complets, toi tu l'utilises pour ajouter des portions d'éléments...

[rps8484a]

Merci, c'était en effet le problème. J'ai remplacé mon utilisation répétitive de append() par une variable text, que je remplie avec des "text += ..." et je l'insert dans le append() à la fin.

Pour le soucis de css, j'ai trouvé également suite à cela.