in una <td> vertical-align non ubbidisce sempre

[jomla]

Ciao ragazzi,
in una tabella ho tre <td>
Il primo e terzo <td> sono dinamicamente riempite a seconda dei bisogni una con una foto e l'altra con del testo e viceversa a seconda dei casi e nel css sono entrambi settati vertical-align:top;.
Quando inizio ad usarle per esempio mettendo una foto nella prima <td> e del testo nel secondo <td> va tutto bene e sia la foto sia il testo sono verticalmente allineati a top
Ma dopo un po' che li uso e li scambio perdono la proprietà verical-align:top e assumono un altro valore.
Non mi era mai successo e non riesco a costringerli neppure con javascript getElementById(id_cella).style.verticalAlign="top" ;

Qualcuno sa il perchè e come posso ovviare all'inconveniente?
Grazie

[ResianTaxidrive]

Si può vedere la pagina? Cosa intendi con "dopo un po' che li uso e li scambio"?

[jomla]

Ti spiego
Nella pagina c'è un vocabolario dialettale BI-DIREZIONALE che ha 2 campi di input
A sinistra cf'è un campo input per l'inserimento di una parola dialettale e a destra si inserisce invece una parola italiana.
Se cercavi di tradurre dal dialetto sotto al campo input dialettale compare la traduzione e a destra l'eventuale foto.
Se invece cercavi la traduzione dall'italiano compare la traduzione sotto al campo di immissione italiano e l'eventuale foto compare a sinistra
I testi delle traduzioni compaiono in una <td> settata vertical-align:top invece dopo un po che si lavora ora sul campo dialettale ora sul campo italiano il top sparisce e se la foto è lunga il testo viene spinto giù.
Provate queste parole ora l'una ora l'altra 1 volta dal dialetto e 1 volta dall'italiano:
zappa, civetta (per l'italiano)
zapa e zveta per il dialetto
Fate molteplici richieste ora in italiano e ora in dialetto e vedrete che il testo con la traduzione all'inizio è a topo poi dopo un po' viene spinto giù invece di restare a top
http://www.iomla.net/vcblr/

[KillerWorm]

Ciao, anticipo la risposta di ResianTaxidrive.

Ci sono un po' di problemi in quella pagina.

Primo fra tutti, l'uso di tabelle in modo improprio. Al giorno d'oggi è inconcepibile pensare ancora di utilizzare le tabelle per impostare la presentazione del layout sulla pagina. Era una pratica che si faceva vent'anni fa quando ancora i css erano degli sconosciuti. Le tabelle servono (e dovrebbero essere usate) solo per mostrare contenuti di tipo tabellare. Il tuo form non è un contenuto tabellare, per cui dovresti rivedere il layout utilizzando dei div o impostando comunque i vari elementi attraverso il css. Un esempio di contenuto tabellare è, invece, la "TAVOLA FONETICA" in quella stessa tua pagina, per cui in quel caso, è corretto l'uso di tabelle.

Per maggiori informazioni, o per avere qualche chiarimento a riguardo, ti consiglio di dare uno sguardo tra i link utili di questa sezione del forum (la discussione è messa in evidenza). Vedi "Tableless" sul capitolo 3. Perché usare i CSS - approccio al moderno web design.

Detto questo, non è consentito inserire l'elemento form come figlio di tr. Su quella pagina ci sono comunque svariati errori di validazione del codice html oltre questo. E' plausibile che, con errori del genere, si verifichino poi dei problemi sul rendering della pagina stessa.
Per verificare la validità del codice, puoi utilizzare dei validatori. Vedi "Validatori" sul capitolo 5. Strumenti per lavorare con i CSS dei link utili.

L'errore di allineamento è comunque dato, nello specifico, dalla proprietà display: block; che hai applicato agli elementi td che contengono il testo e l'immagine. Di norma un elemento td ha proprietà display: table-cell, la quale gli attribuisce un particolare comportamento nel rendering della pagina.
Il fatto che gli venga applicato block va a generare degli scompensi nell'impaginazione stessa. Non vedo poi il motivo di applicare block ad un elemento td. Anzi, come già detto, non ci sarebbe proprio il motivo di usare lì una tabella.

[jomla]

Grazie per le ampie spiegazioni, vedo cosa posso fare con le mie conoscenze di css.
Avevo scelto le tabelle per allineare meglio i 2 imput siccome con i <div> non riuscivo ad allinearli in maniera ottimale
Grazie per ora

[KillerWorm]

Figurati. Ad ogni modo, sempre tra i link utili, puoi trovare diverse guide e tutorial per capire meglio "posizionamento" e "allineamento" di elementi. Ti invito a dare qualche sguardo.

Buon proseguimento.

[jomla]

Figurati. Ad ogni modo, sempre tra i link utili, puoi trovare diverse guide e tutorial per capire meglio "posizionamento" e "allineamento" di elementi. Ti invito a dare qualche sguardo.

Buon proseguimento.

Li leggerò senz'altro
Per adesso ho tolto e/o corretto tutti gli errori del validatore e non ce ne sono più
Ho anche cambiato il display="block" sostituendolo con table-cell e il risultato è stato immediatamente positivo.
Prossimo passo sarà usare i <div> quando sarò riuscito ad allinearli.
Per ora sono contento perchè funziona tutto finalmente bene
Grazie ancora

[KillerWorm]

Benissimo.
Giusto per puntualizzare, table-cell è il valore di default per gli elementi td, per cui potresti anche non specificarne la proprietà display.

[jomla]

Benissimo.
Giusto per puntualizzare, table-cell è il valore di default per gli elementi td, per cui potresti anche non specificarne la proprietà display.

siccome la cella è normalmente settata tra una ricerca e l'altra a display:none come la mostro?

[KillerWorm]

Hai ragione. Non stavo considerando quel fatto. In tal caso è corretto reimpostare display:table-cell, come hai fatto.