Problème d'apparence et de codage avec images descriptives

[Pierre43]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : Ajout de la template et du css concerné
Lien du forum : http://horde-orugaron.forumactif.com/

Description du problème

Bonjour

On m'a signalé hier un problème d'affichage lié à la dernière modification de template / css sur les catégories du forum.
En effet, sous chrome (navigateur que j'utilise) tout vas bien alors que sur Firefox (navigateur de la personne m'ayant lancé le signal) toutes les images de description sont déformées puis sortent de leur cadre.
Les images descriptives ont un effet de "hover" avec le texte descriptif qu'on ne voit pas sur le screen.

Mon template Index_Box

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
<tr>
  <td valign="bottom">
      <!-- BEGIN switch_user_logged_in -->
      <span class="gensmall">{LAST_VISIT_DATE}<br/>
      {CURRENT_TIME}<br/>
      </span>
      <!-- END switch_user_logged_in -->
      <div class="nav">
        <a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}
      </div>
  </td>
  <td class="gensmall" align="right" valign="bottom">
      <!-- BEGIN switch_user_logged_in -->
      <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br/>
      <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br/>
      <!-- END switch_user_logged_in -->
      <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
  </td>
</tr>
</table>
<!-- BEGIN catrow -->
<!-- BEGIN tablehead --><center><div class="titre_categorie">
  {catrow.tablehead.L_FORUM}
</div></center>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
 
<center><table class="corp_categorie">
   <tr>
      <td  colspan=4 class="titre_forum"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></td>
   </tr>
   <tr>
      <td><img class="old_new_lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
      <td><div class="description_forum">{catrow.forumrow.FORUM_DESC}</div></td>
     <td><div class="corp_sous_forum"><div class="sous_forum" id="sous_forum">{catrow.forumrow.L_LINKS} {catrow.forumrow.LINKS}</div></div></td><script type="text/javascript">jQuery('#sous_forum').html(jQuery('#sous_forum').html().replace(/,/g,"<br />")).removeAttr('id');</script>
      <td><div class="stat_dernier_post"><div class="stat">Sujets : {catrow.forumrow.TOPICS} Messages : {catrow.forumrow.POSTS}</div><div class="stat_forum">{catrow.forumrow.LAST_POST}</div></div></td>
   </tr>
  </table></center>
<!-- END forumrow -->
<!-- BEGIN catfoot -->
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<!-- END tablefoot -->
<!-- END catrow -->

Mon CSS lié aux catégories

Code:

/************************************* CATEGORIES ******************************************/

/* BLOC TITRE CATEGORIE */
.titre_categorie {
    background-image:url(https://i.servimg.com/u/f70/17/25/39/10/cellpi10.jpg)
    width: 800px;
    background-position: center;
    height: 30px;
    padding: 1px;
    text-align: center; /* modifiable */
}
/* TITRE CATEGORIE */
.titre_categorie h2 {
    color: #FFFFFF; /* modifiable */
    text-transform:uppercase; /* modifiable */
    font-size: 24px;
    margin-top: 0px
    text-shadow: 2px 2px 1px #000000; /* modifiable */
}
/* BLOC TITRE FORUM */
.titre_forum {
    background-color: #D1D7DC; /* modifiable */
    text-transform:uppercase; /* modifiable */
    text-align: left;
    margin-left: 20px;
    margin-top: 5px;
}
/* TITRE FORUM */
.titre_forum a {
    color: #000000!important; /* modifiable */
    font-size: 18px; /* modifiable */
    text-shadow: 2px 2px 1px white; /* modifiable */
}
.titre_forum a:hover {
 color: #DD6900 !important; /* modifiable */
}
/* BLOC SOUS-FORUMS / DESCRIPTION / DERNIER MESSAGE FORUM */
.corp_categorie {
    background-color: #EFEFEF; /* modifiable */
    display: inline-block;
    padding-top: 1px;
    width: 800px;
    padding-bottom: 5px;
}
/* BLOC SOUS-FORUMS */
.corp_sous_forum {
    height: 80px;
    text-align: left;
    width: 240px;
    box-shadow: 1px 1px 1px #8E8E8E; /* modifiable */
    overflow: auto;
}
/* BLOC SOUS-FORUMS */
.sous_forum {
    background-color: #DEE3E7; /* modifiable */
    min-height: 80px;
}
.sous_forum a {
    background-color: #EFEFEF; /* modifiable */
    border: 1px solid #fff; /* modifiable */
    color: #363636; /* modifiable */
    font-size: 10px; /* modifiable */
    margin-bottom: -16px;
}
.sous_forum a:hover {
color: #DD6900;  /* modifiable */
}
/* DESCRIPTION FORUM */
.description_forum {
    background-color: #DEE3E7; /* modifiable */
    display: inline-block;
    height: 70px;
    overflow: auto;
    width: 265px;
    font-size: 12px; /* modifiable */
    padding: 5px;
    box-shadow: 1px 1px 1px #B3B3B3; /* modifiable */
}
.description_forum:hover {
overflow-y:auto;
}
/* IMAGE DESCRIPTIVE FORUM */
.description_forum img {
    position:absolute; z-index:3; margin-top:0px; margin-left:0px;
    width:265px; height:70px;
    transition:all .0s linear; -webkit-transition:all .0s linear;
}
.corp_categorie:hover .description_forum img {
    visibility:hidden;
}
/* Gestion de la taille de l'icone sous forum */
.sprite-icon_minipost {
background-position: -455px 0;
}
/* DERNIER MESSAGE FORUM */
.stat_dernier_post {
    display: inline-block;
    font-size: 10px; /* modifiable */
    height: 70px;
    padding-top: 10px;
    text-align: center;
    width: 195px;
    margin-right: 5px;
    background-color: #DEE3E7; /* modifiable */
    box-shadow: 1px 1px 1px #B3B3B3; /* modifiable */
}
.stat {
    background-color: #D1D7DC; /* modifiable */
    margin-bottom: 12px;
    margin-top: -10px;
    color: white; /* modifiable */
    text-shadow: 1px 1px 0px #000000;
}
.stat_forum {
  font-family: monospace; /* modifiable */
}
/* ICÔNES FORUM */
.old_new_lock {
  background-color: transparent; /* modifiable */
    width: 70px;
    height: 80px;
}
/* SOULIGNEMENTS */
a:hover{
text-decoration: none !important; /** enlève le soulignement des liens au passage de la souris **/
}
a {
text-decoration: none !important; /** enlève le soulignement des liens **/
}

/************************************* FIN DES CATERGORIES ******************************************/

Pourriez-vous, s'il vous plait, voir d'où vient le soucis et, si possible, me faire part d'une solution pour corriger cela.
Merci par avance

[Invité]

Hello Pierre43,

dans ta feuille de style tu as ceci:

Code:

.description_forum {
    background-color: #DEE3E7; /* modifiable */
    display: inline-block;
    height: 70px;
    overflow: auto;
    width: 265px;
    font-size: 12px; /* modifiable */
    padding: 5px;
    box-shadow: 1px 1px 1px #B3B3B3; /* modifiable */
}

remplaces:

Code:

display: inline-block;

par:

Code:

display: inline-flex;

Et voilou .

a++

[Pierre43]

Niquel, ça fonctionne.
Dire que je cherchais dans le CSS de l'image descriptive lol
Merci beaucoup

[Invité]

Re,
de rien cher ami .

a++