Carnet de bord répété

[Sorakat]

Bonjour à vous : je pense avoir un soucis de codage mais je ne parviens pas à comprendre ce qui cloche.

Tout d'abord, voilà ce que j'ai voulu faire : mettre derrière l'avatar les informations du compte, ainsi que le carnet de bord (feuille de personnage), histoire que cela ne prenne pas trop de place.
Pour se faire, j'ai ceci en CSS :

Code:


/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHÉES */

/* hack Chrome / Safari */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.cate_img {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 400px;
  margin-top:2px;
  margin-left:1px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;

transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
}

.cate
{
  width: 202px;
  height: 400px;
  overflow: hidden;
  color:grey;
  border-radius:0px;
  -moz-border-radius:0px;
  -webkit-border-radius:0px;
  text-align:center;
}
.cate_img {
  position: relative;
  z-index: 2;
  width: 200px;
  height: 400px;
  margin-left: 0px;
    transform: all;
  margin-left:1px;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 190px;
  height: 400px;
  margin-top: -380px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}
/*-- (By : Never-Utopia) --*/


et ça dans le template :

Code:

<td style="padding-left:5px;padding-right:5px;background: url('http://img444.imageshack.us/img444/2033/topavatar.png') top center no-repeat !important;" valign="top" width="220px">
                  <div width="220px" style="margin-top:35px;background:url('http://img707.imageshack.us/img707/5449/fonddesavatars3.png')no-repeat center top;">
                  <span class="name"><a name="{postrow.displayed.U_POST_ID}"></a>
                    <strong>
                    <div style="text-align:right;padding-top:8px;margin-bottom:-1px;font-size:14px;">{postrow.displayed.POSTER_NAME}</div>
                    </strong>
                  </span><br />
         <span class="postdetails poster-profile">
                          <div width="200px" height="400px">
                           
                           
                           
                           
                            <div class="cate">
                              <div class="cate_img">
                            {postrow.displayed.POSTER_AVATAR}                           
                              </div>
                             
                              <div class="cate_description" style="padding:5px;">
                                <!-- BEGIN profile_field -->
            <span class="postdetails poster-profile">
                                  <div style="clear: both;">   
                                  {postrow.displayed.POSTER_RPG}
                                  {postrow.displayed.profile_field.LABEL}
                                  {postrow.displayed.profile_field.CONTENT}
                                 
                                  {postrow.displayed.profile_field.SEPARATOR}
                                  </div>
                                </span>
            <!-- END profile_field -->
                              </div>
                            </div>
                         
                           
                           
                           
                           
                           
                          </div><br /><br />
                          <div style="text-align:left;margin-top:-8px;">{postrow.displayed.POSTER_RANK}{postrow.displayed.RANK_IMAGE}</div><br />
            
         
         </span><br />
                  <img src="http://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" /></div>
      </td>

Mais si l'animation affiche bel et bien les informations voulues derrière l'avatar, celles-ci se répètent...
Voici des imprimés d’écran pour montrer ce qui cloche :

Spoiler:

Ma question est simple : comment éviter la répétition qui m'enquiquine tant ? :/
Ai-je oublié de mettre une balise ou dois-je ajouter quelque chose ?
Si oui : quoi ?

[Sorakat]

Au final j'ai trouvé seule : il suffisait de séparer les deux au lieu de les mettre dans la même balise =3
Désolée du dérangement o/