[html] Non riesco a far funzionare il parametro VALIGN o VERTICAL-ALIGN.

Questo il codice che si puo' inserire in una pagina bianca per vedere il funzionamento.

Codice HTML:

---

  <TABLE width="600" border="1" cellspacing="0" cellpadding="0">
      <TR height="75">
        <TD rowspan="2" align="right" valig="middle">Tipo evento: </TD>
        <TD>&nbsp;</TD>
      </TR>
      <TR valign="middle">
        <!-- TD gia' inserito nella riga sopra con rowspan="2" -->

        <TD>
<FORM name="dati_evento">
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" name="bottone_colorato" onmouseover="" style="COLOR:#FFFFFF; BACKGROUND:#000000" onmouseout="" onclick="document.dati_evento.bottone_colorato.style.color=document.dati_evento.tipo_personalizzato.value">
              <BR>&nbsp;&nbsp;PREMI PER IL COLORE&nbsp;&nbsp;<BR><BR>
            </button>
            <input type="radio" name="tipo_evento" value="PERSONALIZZATO" />
            <input type="text" name="tipo_personalizzato" value="#FFFFFF" size="7" maxlength="7" />
        </TD>
      </TR>
</FORM>

  </TABLE>

---

In sostanza in un elemento <TD> ho un button, un input-radio e un input-text che volevo allineare verticalmente al centro. Ho provato a mettere il paragetro "VALIGN" e/o VERTICAL-ALIGN (dello style CSS) un po' ovunque ma non riesco.

L'unica soluzione che ho trovato, sarebbe quella di usare il posizionamento tramite "style="POSITION: relative; TOP: xxpx". Pero' Qui sorge un altro problema: in FF li allinea in alto, in IE in basso. Quindi questa soluzione potrebbe andare solo per uno dei due brwser e per l'altro creerebbe problemi. E poi e' solo uno stratagemma, mentre volevo capire come mai il "valign" non va.

GRAZIE

Valign o vertical-align funziona su entrambi i browser, però dipende dal contesto dove lo si usa. Nel mio esempio sotto, non c'è nemmeno bisogno di specificare "middle" perché tutti gli elementi restano comunque al centro essendo "isolati" nelle celle indipendenti..

Codice HTML:

---

<TABLE border="1"> <TR> <TD style="width:100px; padding:0 5px 0 0;

text-align:right; vertical-align:middle;">Tipo evento: </TD> <TD>

<TABLE> <TR> <TD style="height:140px; border:1px solid #e73;">...</TD>

<TD style="height:140px; border:0;"> ... </TD> </TR> <TR> <TD style="width:250px;

height:140px; border:1px solid #09e; text-align:center;">

<button type="button" name="bottone_colorato" onmouseover="" style="COLOR:#FFFFFF;

BACKGROUND:#000000" onmouseout=""

onclick="document.dati_evento.bottone_colorato.style.color=document.dati_evento.tipo_personalizzato.value">

<BR>&nbsp;&nbsp;PREMI PER IL COLORE&nbsp;&nbsp;<BR><BR>

</button></TD><TD style="width:120px; height:140px; border:1px solid #0d0;

text-align:center;"><input type="radio" name="tipo_evento" value="PERSONALIZZATO">

<input type="text" name="tipo_personalizzato"

value="#FFFFFF" size="7" maxlength="7"> </TD> </TR> </TABLE> </TD> </TR> </TABLE>

---

in un certo senso ho risolto...

tutti e tre gli elementi "input" contenuti nella stessa "TD" dovevano avere l'attributo valign o vertical-align settato a middle (altrimenti non andava).