Affichage ul li a décalés

Salut à tous !

Aujourd'hui un petit souci avec un plugin wordpress qui me donne du fil à retordre. En local, aucun souci, en ligne c'est une autre histoire, la totalité du code a changé, il a donc fallu adapter.

Le plugin : Related_posts_thumbnails
Le site : www.luluetsatribu.fr
(Ouvrir un article, tout en bas, pour voir l'affichage en question )

J'ai donc une liste ul, 3 li avec dans chacun 2 liens : Un premier avec une img, un 2eme avec le titre lié à l'img ( et donc l'article ).
Le souci, c'est le décalage. La première image parrait bien placée avec son titre, mais le titre n'est pas le bon, il s'agit du titre de la 3eme image; le titre de la 2eme image est placé au dessus et devrait etre le titre de la 1ere image; 3eme image pareil...
Bref, c'est le bordel, je comprends plus rien ^^

Je vous passe le tout en code ( j'ai supprimé les liens/alt/src qui n'étaient pas utiles ):

<div id="relpost">
<h3></h3>
<ul id="related_posts_thumbnails">
    <li>
        <a href=""><img alt="" src="" width="182" height="182"></a>
        <a href=""><span></span></a>
    </li>
    <li>
        <a href=""><img alt="" src="" width="182" height="182"></a>
        <a href=""><span></span></a>
    </li>
    <li>
        <a href="h"><img alt="" src="" width="182" height="182"></a>
        <a href=""><span></span></a>
    </li>
</ul>
<div style="clear:both"></div>
</div>

Et le CSS lié :

#relpost h3 {
    padding: 40px 11px 24px 20px;
    text-align: center;
}
#related_posts {
    margin: auto;
    width: 576px;
    min-height: 180px;
    padding: 10px 0 10px 10px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -khtml-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 10px #000, 1px 1px 0 rgba(255,255,255,.5);
    -khtml-box-shadow: inset 0 0 10px #000,1px 1px 0 rgba(255,255,255,.5);
    -moz-box-shadow: inset 0 0 10px #000,1px 1px 0 rgba(255,255,255,.5);
    -o-box-shadow: inset 0 0 10px #000,1px 1px 0 rgba(255,255,255,.5);
    background: transparent url(images/bg_black.png) 0 0 repeat;
}
#related_posts a {
    float: left;
    position: relative;
    display: block;
    width: 182px;
    margin-right: 10px;
    line-height: 16px;
    font-size: 13px;
    color: #ababab;
    text-align: left;
    -webkit-transition: color .3s ease-in;
    -moz-transition: color .3s ease-in;
    -o-transition: color .3s ease-in;
    -khtml-transition: color .3s ease-in;
    transition: color .3s ease-in;
}
#related_posts a img {
    opacity: 0.7;
    -webkit-transition: opacity .3s ease-in;
    -moz-transition: opacity .3s ease-in;
    -o-transition: opacity .3s ease-in;
    -khtml-transition: opacity .3s ease-in;
    transition: opacity .3s ease-in;
}
#related_posts a img:hover, #related_posts a img:active {
    opacity: 1;
}
#related_posts a span {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 170px;
    padding: 6px;
    background-color: rgba(25,25,25,.8);
}
#related_posts a:hover, #related_posts a:active {
    color: #FFF;
}

Le résultat escompté : les 3 images cote à cote ( taille des images 182*182 ) avec en bas de chaque image, le lien titre, le tout dans une div avec un fond image. J'ai laissé les effets de transition dans mon css, mais bon, c'est pas utile ici.
Je pense qu'il doit me manquer un petit truc qq part, et faut trouver quoi et où :) ( mon idée, c'est le height des a, mais voilà moi pas comprendre )

Merci d'avance à tous !