Problema com widget personalizada

Qual é minha questão:
Ola,Bom estou querendo fazer uma widget personalizada de AMIGOS para meu fórum,mas estou com um pequeno problema,que e o tamanho eles não estão se alinhando ¬¬" , Bom e só um teste oque estou fazendo,para depois tentar fazer um melhor mas a imagem estar aqui em baixo :

o código em que estou utilizando e esse :

Código:


<div>

    <table style="-moz-border-radius: 0px 0px 0px 0px;" border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: no-repeat;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/f0e59bfc.png" height="30" width="21"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-x;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/1-1.png" height="30" width="117"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-x;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/2-1.png" height="30"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: no-repeat;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/3-1.png" height="30" width="22"> </td></tr>
    <tr><td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-y;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/5-1.png" width="21"><br></td>
    <td colspan="2" name="conteudo vote" style="background-color: rgb(255, 255, 255);">
    <!--Inicio do Conteudo-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><script>
jQuery.get('/profile?mode=viewprofile&u={USERNAME}', function(data) {
  html = jQuery('#profile-advanced-right .module:eq(1) .inner div:eq(1)', data).html();
  jQuery('#friends_list').html(html);
});
</script><center><div id="friends_list">Aguarde, listando...</div></center>
    <!--Fim do conteudo-->
    </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-y;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/4-1.png" width="21"> </td></tr>
    <tr><td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: no-repeat;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/6-1.png" height="23" width="21"> </td>
    <td colspan="2" style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-x;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/7-1.png" height="23"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: no-repeat;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/8-1.png" height="23" width="22"> </td></tr></table>
    </div>

Medidas que eu tomei para corrigir o problema:
n sei...

Links e imagens do meu problema:
Link direto da imagem :

Endereço do meu fórum:
http://fairytailmilenium.forumeiros.com

Versão do meu fórum:
PHPBB3

Olá,

Bom cara eu olhei e no final do seu codigo onde tem estas imagens elas não estão se alinhando porque vc ajustou ou deixou de ajustar os Height,Width e se observar tbm tem os Px então eles que estão desajustando de uma olhada no final desse seu codigo nessa parte abaixo onde fica as imagens das bordas onde tem o problema localiza atraves dos url que tem no codigo veja eles e ache os que tão com as laterais erradas ai vc vai mechendo nos que disse eu acima ...

Código:


 <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: no-repeat;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/f0e59bfc.png" height="30" width="21"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-x;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/1-1.png" height="30" width="117"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-x;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/2-1.png" height="30"> </td>
    <td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: no-repeat;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/3-1.png" height="30" width="22"> </td></tr>
    <tr><td style="-moz-border-radius: 0px 0px 0px 0px; background-repeat: repeat-y;" background="http://i1164.photobucket.com/albums/q576/Netinhogdr/5-1.png" width="21"><br></td>


Se puder clique no + ou no +THANKS por favor ok da essa ajuda...

Até Logo

Valeu pela dica Lifes,mexi no código fiz umas novas imagens com tamanhos adequados antes de recorta-los,mas não consegui mover os PX :/ , sobre ele ter estado todo desalinhado e por que as imagens estavam uma maior que a outra pedida no código e a porcentagem do tamanho bem maior O.o

Valeu

Que nada somente estou fazendo minha obrigção de ajudar, Vlw se serviu de algo, Se puder clica no botão Obrigado e no + da essa força vlw flws ....


Até Logo!

ja dei no seu primeiro post xD , tópico resolvido

vlw pela força tamo junto!