Code de catégories

Bonjour,
je viens vers vous car j'ai utilisé le tutoriel fait par Alice juste ici : https://www.never-utopia.com/t50317-categories-pink-gray mais voilà chez moi ça ne rend pas du tout pareil
En effet, lorsque l'image nouveau message, no new, etc... apparaît, tous les cadres sont décalés et plus aligné comme sur le beau screen qu'il y a dans le tuto. Nous avons été plusieurs à y jeter un coup d'oeil mais nous ne trouvons pas le problème ... :/ Voici nos codes et une capture d'écran du problème : http://fr.tinypic.com/view.php?pic=2nbcdg0&s=8#.VSVH3_msX1g

Merci par avance de votre aide :)

Templates :

Code:

<link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'>
  <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 --><table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
<th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th> 
<th nowrap="nowrap" width="150"><div style="width:150px;"> </div></th><!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
  </tr>
  <!-- END cathead -->
  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center"><br/>
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="margin-top:7px;" />
                  <div class="cat_gauche">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
                    <br><br>
                      <span class="gensmall">{catrow.forumrow.TOPICS} sujets ⊹  {catrow.forumrow.POSTS} messages</span><br/>
                  </div></td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
                  <span class="nom_cat">
              <a class="nom_forum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
                  <span class="forum_desc">{catrow.forumrow.FORUM_DESC}</span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
                  <span class="cat_droite_conteneur"><div class="cat_droite_contenu" id="sousForums"><span class="gensmall2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div></span>
                    <script type="text/javascript">
  <!--
                      jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
  jQuery(document).ready(function(){
    jQuery('a.gensmall').each(function (){
    var texte = jQuery(this).attr('title') ;
    if(texte){
    texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
    jQuery(this).attr('title', texte);
    }
    });
  });
  //-->
  </script>
      </td>
  </tr>
  <!-- END forumrow -->
  <!-- BEGIN catfoot -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
  </tr>
  <!-- END catfoot -->
  <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

CSS :

Code:

/* --------------------------------- CATEGORIES --------------------------------- */

.secondarytitle {
  text-align:left !important;
  text-transform:uppercase;
  font-size:12px;
  font-family: 'Oswald', sans-serif;
  color:#422d4a;
}
.cat_gauche {
font-size:12px;
background-color:#0A0A0A;
padding:5px;
margin-top:9px;
width:140px;
}

.nom_forum {
 font-family: 'Oswald', sans-serif;
  font-size: 18px;
  text-align: left;
  text-transform: uppercase;
}

.forum_desc {
height:70px;
overflow:auto;
display:block;
text-align:justify;
font-size:10px;
background-color:#1C171E;
padding:10px;
  font-family:arial;
}

.cat_droite_conteneur {

margin-top:25px;
height:70px;
overflow:auto;
display:block;
background-color:#1C171E;
padding:10px;
}

.cat_droite_contenu {
background-color:#1C171E;
padding:3px;
width:99px;
margin:auto; 
font-family: Arial;
font-size:10px;
}

.gensmall2 a {
  font-size:10px !important;

  font-size: 11px;

  margin-bottom: 2px;
  text-align: center;
  text-transform: uppercase;

  width: 159px;
}


.imageDescr {
 border :1px solid #39263c;
padding: 2px 2px 2px 2px;
  filter: grayscale(1);
        -webkit-filter: grayscale(1);
        -moz-filter: grayscale(1);
        -o-filter: grayscale(1);
        -ms-filter: grayscale(1);
 
}

.imageDescr:hover{
  filter: grayscale(0);
        -webkit-filter: grayscale(0);
        -moz-filter: grayscale(0);
        -o-filter: grayscale(0);
        -ms-filter: grayscale(0);
}

Plop, dans cat_droite_conteneur enlève le margin-top et remplace-le par vertical-align: top;
Ensuite si tu veux que les blocs aient la même hauteur il faudra agrandir celui du milieu et celui de droite pour les adapter à celui de gauche. Voilà ~ 

Alors après divers essais d'après ce que tu m'as dit, ça ne fonctionne toujours pas :/

Le lien du forum :

Bon bah ajoute un margin-top: -15px dans cat_droite_conteneur. Chez moi ça résout le problème (:

Alors ça remonte légèrement mais ce qui est vraiment bizarre c'est que dans les premières catégories, le cadre n'est pas tout à fait aligné sur le haut et dans les catégories plus basses, le cadre dépasse carrément en haut... Je ne vois vraiment pas d'où vient le problème :/

Je suis sous Chrome est ce que ça pourrait venir de là ?

Non puisque je suis sous Chrome aussi '-'

Mais je ne comprends pas chez moi c'est aligné À moins que j'ai mal compris

Voilà comment c'est chez moi :
https://2img.net/image.noelshack.com/fichiers/2015/16/1428940800-sans-titre.png
https://2img.net/image.noelshack.com/fichiers/2015/16/1428940830-sans-titre.png

Ah effectivement j'ai ça aussi -_- je n'étais pas descendue sur tout le forum...

Bon, j'ai eu un soucis avec un autre LS. Si tu enlèves les virgules de toutes les descriptions de tes sous-fora, est-ce que le bloc de droite s'aligne ?

Voilà j'ai fait des réglages en plus et je pense que j'ai réussi à régler le problème avec tes conseils :)

Vous pouvez archiver merci :)

margin-top: 26px Il y a un léger décalage encore.
Mais si c'est ok n'oublie pas d'éditer le premier message et de mettre l'icone terminé !