Infobulle IE et affichage
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:
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 ?
