Sujets similaires

Bonjour/Bonsoir !

Sur la page d'accueil de mon forum, j'ai normalement trois infobulles qui apparaissent parfaitement sur Mozilla. Comme je sais que Chrome et Safari sont assez utilisés également (du moins, Chrome), j'aimerais savoir s'il est possible de corriger un petit problème auquel je suis confronté. Voici une image qui démontre le problème.

Spoiler:

Normalement, l'infobulle sur Mozilla apparaît ainsi :

Spoiler:

J'ai créé ma page d'accueil dans une page html, du coup, le css est regroupé dedans ainsi que les scripts pour les onglets. Je vous donne le code ainsi que le lien du forum. Auriez-vous une idée pour corriger le problème ?

Code:: http://landofmyth.forum-canada.com/

Code:: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">

.allpa {
background-image: url(http://i42.servimg.com/u/f42/17/92/76/89/fondpr11.jpg);
width: 750px;
padding: 10px;
margin: -5px;
}

* {
font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */
font-family: Tahoma, Verdana, Arial, serif;
}

a.infobulle {
position: relative;
color: black;
text-decoration: none;
text-align:center;
opacity: 1;
}
a.infobulle span {
display: none;
opacity: 1;
}
a.infobulle:hover {
background: none; /* Correction d'un bug d'Internet Explorer. */
z-index: 1;
opacity: 1;
}
a.infobulle:hover span {
display: inline;
position: absolute;
z-index: 1;
top: -225px;
left: -100px;
background-image: url(http://i42.servimg.com/u/f42/17/92/76/89/bois_f17.jpg);
color: darkred;
padding: 3px;
border: 1px solid darkred;
border-left: 4px solid darkred;
border-right: 4px solid darkred;
opacity: 1;
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-ms-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
}

.mon_onglet{
display: inline;
padding: 2px;
margin: 2px 5px 5px 5px;
color: black;
font-family: 'UnifrakturMaguntia';
font-size: 20px;
text-shadow: 1px 1px 1px white;
word-spacing: 5px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s
}

.mon_onglet:hover{
font-family: 'UnifrakturMaguntia';
font-size: 20px;
color: white;
text-shadow: 1px 1px 1px black;
word-spacing: 5px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;}

.mon_onglet_selected{
display: inline;
padding: 2px;
margin: 2px;
display: inline;
padding: 2px;
margin: 2px 5px 5px 5px;
font-family: 'UnifrakturMaguntia';
font-size: 20px;
color: white;
text-shadow: 1px 1px 1px black;
word-spacing: 5px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
}

.clear{
clear: both;}

.mon_contenu{
color: #000;
padding: 10px;
margin: 10 px;
line-height: normal;
font-size: 11px;
width: 350px;
height: 200px;
overflow: auto; }

#mes_contenus, #mes_onglets{
height: 100%;
width:100%;}

.imgstaff {
width: 90px;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-ms-border-radius: 50px 50px 50px 50px;
-o-border-radius: 50px 50px 50px 50px;
box-shadow: 2px 2px 0px black;
-webkit-box-shadow: 2px 2px 0px black;
-ms-box-shadow: 2px 2px 0px black;
-o-box-shadow: 2px 2px 0px black;
opacity: 0,5;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
}

.imgstaff:hover {
width: 90px;
border-radius: 50px 50px 50px 50px;
-webkit-border-radius: 50px 50px 50px 50px;
-ms-border-radius: 50px 50px 50px 50px;
-o-border-radius: 50px 50px 50px 50px;
box-shadow: 0px 0px 15px silver;
-webkit-box-shadow: 0px 0px 15px black;
-ms-box-shadow: 0px 0px 15px black;
-o-box-shadow: 0px 0px 15px black;
opacity: 1;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
}

.titre {display:block;
font-family: 'UnifrakturMaguntia';
text-transform:lowercase;
padding-top: 5px;
text-align:center;
font-size:40px;
color:darkred;
width: 100%;
letter-spacing: 2px;
text-shadow:1px 1px 0px black;
border-bottom: black 2px dotted;
border-top: black 2px dotted;
}

.liens {
font-family: 'UnifrakturMaguntia';
font-size: 20px;
color: black;
text-shadow: 1px 1px 1px white;
word-spacing: 5px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
text-decoration:none;
}

.liens:hover {
font-family: 'UnifrakturMaguntia';
font-size: 20px;
color: white;
text-shadow: 1px 1px 1px black;
word-spacing: 5px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
}

.fondtexte {
background-image: url(http://i42.servimg.com/u/f42/17/92/76/89/book-p11.jpg);
-webkit-border-radius: 20px 20px 20px 20px;
-moz-border-radius: 20px 20px 20px 20px;
-ms-border-radius: 20px 20px 20px 20px;
border-radius: 20px 20px 20px 20px;
opacity: 0.7;
padding: 10px;
padding-left: 15px;
overflow: auto;
text-align: justify;
font-size: 10px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
}

.fondtexte:hover {
background-image: url(http://i42.servimg.com/u/f42/17/92/76/89/book-p11.jpg);
opacity: 1;
-webkit-border-radius: 40px 40px 40px 40px;
-moz-border-radius: 40px 40px 40px 40px;
-ms-border-radius: 40px 40px 40px 40px;
border-radius: 40px 40px 40px 40px;
padding: 10px;
padding-left: 15px;
overflow: auto;
text-align: justify;
font-size: 10px;
transition: 3s;
-ms-transition: 3s;
-o-transition: 3s;
-webkit-transition: 3s;
}

</style>

<script language="javascript" src="http://designme.forum-canada.com/10081.js"></script>

</head>
<link href='http://fonts.googleapis.com/css?family=UnifrakturMaguntia' rel='stylesheet' type='text/css'>
<center><br>
<div class="allpa"><br><div class="titre">Bienvenue sur Land of Myth</div><br>
<div class="liens">• <a class="liens" href="http://landofmyth.forum-canada.com/t1-livre-des-lois" target="_blank">Règlements</a> • <a class="liens" href="http://landofmyth.forum-canada.com/f4-contexte-intrigues" target="_blank">Contexte</a> • <a class="liens" href="http://landofmyth.forum-canada.com/t26-decret-10-personnages-du-rpg" target="_blank">Décrêt l</a> • <a class="liens" href="http://landofmyth.forum-canada.com/t27-decret-20-quetes-tournois" target="_blank">Décrêt ll</a> • <a class="liens" href="http://landofmyth.forum-canada.com/t33-le-recueil" target="_blank">Bottin des avatars</a> • <a class="liens" href="http://landofmyth.forum-canada.com/f18-questions-invites" target="_blank">Invités</a> •</div>

<table><tr><td>

<table style="margin: auto; height: 300px;" class="fondtexte"><tr><td><div class="clear"><div id="mes_contenus">
<div id="co_1" class="mon_contenu">Contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte contexte </div>
<div id="co_2" class="mon_contenu" style="display: none;">Contenu Informations</div>
<div id="co_3" class="mon_contenu" style="display: none;">Contenu Invités<br><br>
<font style="color:red; font-weight:bold;">La lecture des règlements doit se faire AVANT l'inscription</font></div>
<div id="co_4" class="mon_contenu" style="display: none;"><table width="100%"><tr><td><div align="center"><font style="color:gold; font-size: 22px; text-shadow: 1px 1px 1px darkred;">♞ ♞ ♞ ♞ <br><br>♞ ♞ ♞ ♞ <br><br>♞ ♞ ♞ ♞ <br><br></font></div></td><td>Devenir partenaire<br><br>Nos partenaires<br><br>Votez pour nous<br><br>Nous lier<br><br></td></tr></table></div>
</div></div></div></td></tr>
<tr><td style="padding-bottom: 4px;"><div align="center"><div id="mes_onglets">
<span id="o_1" class="mon_onglet_selected" onclick="changeOnglet(this);">Contexte</span>
<span id="o_2" class="mon_onglet" onclick="changeOnglet(this);">Informations</span>
<span id="o_3" class="mon_onglet" onclick="changeOnglet(this);">Invités</span>
<span id="o_4" class="mon_onglet" onclick="changeOnglet(this);">Partenaires</span></div></td></tr></table>
</td>
<td>
<table>
<tr>
<td style="height:150px; padding:5px;" class="fondtexte">
<a href="#" class="infobulle"><img src="http://kridiotis.com.cy/media//book_icon.png" class="imgstaff"><span><font style="font-family:'UnifrakturMaguntia'; font-size:20px;">Le Conteur</font><br>Fondateur<br><font style="color:green; font-weight:bold;">Présent</font><br><img src="http://25.media.tumblr.com/tumblr_m173w9cd8p1qak3qto3_250.gif" width="150px"><br>Mp • Profil</span></a>

<a href="#" class="infobulle"><img src="http://i49.servimg.com/u/f49/12/29/04/02/athala10.jpg" class="imgstaff"><span><font style="font-family:'UnifrakturMaguntia'; font-size:20px;">Athala Uuild</font><br>Administratrice<br><font style="color:green; font-weight:bold;">Présente</font><br><img src="http://26.media.tumblr.com/tumblr_lm9rhoAW0S1qh61jao1_500.gif" width="150px"><br>Mp • Profil • Fiche</span></a>

<a href="#" class="infobulle"><img src="http://fc06.deviantart.net/fs70/f/2011/069/b/f/merlin_icon_by_loyaloddity-d3bcysi.gif" class="imgstaff"><span><font style="font-family:'UnifrakturMaguntia'; font-size:20px;">Merlin</font><br>Administrateur<br><font style="color:green; font-weight:bold;">Présent</font><br><img src="http://media.tumblr.com/tumblr_m5cyapk0cA1qiqp8v.gif" width="150px"><br>Mp • Profil • Fiche</span></a>
</td>
</tr>
<tr>
<td style="height:150px;" class="fondtexte">Annonces&Nouveautés</td>
</tr>
</table>

</td></tr></table>
<br>
</div>

</center>

</BODY></center>
</html>

Bonjour,

Le problème réside dans le overflow:auto; de la classe .fondtexte. Dans la mesure où il s'applique à une cellule, il n'a pas d'effet probant autre que celui d'empêcher les dépassements... Ergo, celui de l'infobulle ^^'