Allineamento verticale di immagini, span e campi testo

[ldetomi]

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.

<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?

[ricman]

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

Ma con le tabelle (quindi td) non si usa valign="middle"

[consiglio: usa le tabelle per i dati tabellari, non per fare layout...]

[ldetomi]

il valign è una proprietà html ormai obsoleta, per questo non l'ho usata. In CSS si usa il vertical-align. Grazie del consiglio ma non sto usando la tabella per un layout ma proprio perche' quei campi mi servono in una tabella (frequentando html.it, conosco ormai molto bene il layout table-less).

[Mich_]

Il vertical-align e` attivo all'interno delle tabelle per posizionare elementi all'interno.

Per il testo rimane valido l'uso del line-height per spostare il testo dentro lo spazio che ha a disposizione. Per posizionare la scritta centrata rispetto ad un'immagine, devi specificare line-height uguale all'altezza dell'immagine.

Poi ci sono errori di sintassi:
1) nel CSS il background-position non puo` avere un solo valore: devi specificarne due, che nell'ordine sono:
. vert orizz (se ambedue espressi mediante parole-chiave)
. orizz vert (se almeno uno e` espresso in px o %)

2) i tag e gli attributi HTML devono essere scritti in minuscolo (salvo con le vecchie DTD, ma i browser moderni possono non riconoscerli)

[ldetomi]

Ottimo il consiglio sul line-height uguale all'altezza dell'immagine, lo proveò e ti farò sapere. Per i taag maiuscoli hai ragione, ma volevo evidenziare meglio i tag rispetto alle proprietà.

Per il background-position, però ti devo contraddire, proprio ieri sera guardavo le specifiche del w3c e c'è scritto che se si imposta solo una delle due posizioni, l'altra viene messa in automatico. Non si tratta di un adattamento dei browser, è proprio contemplato nelle specifiche.

[ricman]

Originariamente inviato da ldetomi
Grazie del consiglio ma non sto usando la tabella per un layout ma proprio perche' quei campi mi servono in una tabella

Se lo dici tu... ...a me sembrava un layout...

[ldetomi]

Sì, per come l'ho scritto sì, ho ridotto al minimo il codice, in modo da focalizzare l'attenzione su cosa mi presenta il problema. Nella realtà, la tabella ha i bordi visibili, ergo.... è una vera tabella.

Nessun altro ha qualche idea? Ho provato il line-height: ma non funziona (per inciso le 2 immagini sono entrambe 16x16 px).

[ldetomi]

Nessun altro?!?