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 :
Et voici mon code css.
Code : 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
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(); });
Code css : 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
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 ?
Partager