Il seguente codice è uno stralcio (molto sintetico) tratto da uno script che mi fa una validazione dei campi di una form.

Come vedete, nel primo caso l'immagini "ok.gif" viene inserita direttamente dopo il campo testo, mentre nel secondo caso, l'immagine "error.gif" viene resa come sfondo di uno span attraverso cui scrivo anche del testo.

codice:
<TABLE>
  <TR>
    <TD>User ID</TD>
    <TD>
      <INPUT type='text'>
      [img]ok.gif[/img]
    </TD>
  </TR>
  <TR>
    <TD>User ID</TD>
    <TD>
      <INPUT type='text'>
      <span STYLE='padding-left:22px; background-image:url(error.gif); background-position:left; background-repeat:no-repeat;'>Inserisci lo User ID</span>
    </TD>
  </TR>
</TABLE>
Il mio problema risiede nel fatto che non riesco a fare in modo che le immagini siano posizionate VERTICALMENTE allo stesso modo. In entrambi i browser, l'immagine "ok.gif" è sempre un po' più alta del campo testo e dello span, allargando di conseguenza la cella della tabella che fa "scorrere" verso il basso il resto della tabella.
Inoltre anche il posizionamento dello SPAN è sbagliato, essendo sempre un po' basso.

Ho provato a giocare con vertical-align ma non è servito. Avete idee?