Altezza campi di testo

**Tigrotto** · 08-01-2004, 12:49

Chiedo scusa se l'argomento è già stato trattato in passato.
Qualcuno sa come mai una cella di una tabella con un campo di inserimento testo, venga resa da Explorer ( su pc ) più alta rispetto all'elemento di due pixels? E' come se inserisse di sua sponte due spazi, uno sopra, uno sotto, impedendo di realizzare una riga della stessa altezza del campo di inserimento.
Ho provato ad utilizzare vari attributi con i css ma non sono riusicto a risolvere niente. Se qualcuno potesse essermi di aiuto....

Questa in ogni caso è la mia mail, thx

**Federix** · 08-01-2004, 12:59

Un input di testo è alto 22px, quindi se metti una cella alta 20px, quest'ultima verrà alzata per far entrare regolarmente il campo di testo. Se togli il bordo all'input tramite CSS, puoi guadagnare 2px in altezza e larghezza, altrimenti puoi mettere l'altezza dell'input:

codice:

<input type="text" style="height: 20px;">

In questo modo rendi l'altezza della casella di testo pari a 20px.

codice:

<input type="text" style="border: 1 px solid #000000;">

In questo modo metti lo spessore del bordo pari a 1px.

**gordian** · 08-01-2004, 13:00

E' questo che intendi?

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200">
<input type="text" name="textfield">
</td>
<td width="200">
<input type="text" name="textfield2">
</td>
</tr>
<tr>
<td width="200">
<input type="text" name="textfield3">
</td>
<td width="200">
<input type="text" name="textfield4">
</td>
</tr>
<tr>
<td width="200">
<input type="text" name="textfield5">
</td>
<td width="200">
<input type="text" name="textfield6">
</td>
</tr>
</table>
</form>
</body>
</html>

**Tigrotto** · 08-01-2004, 17:17

Federix -
Scusami, credo che non ho spiegato bene il mio problema:
Io imposto l'altezza di un campo di testo diciamo a 19 px con il css.
Il browser rimpiccolisce correttamente l'elemento ma mostra la cella della tabella che lo ospita alta 21 px. In pratica (sia che inserisca o meno il bordo all'input) ho l'area del campo di testo alta effettivamente 19 px ma sopra e sotto mi ritrovo un px di distanza dal bordo della cella.
es.:
<style type="text/css">

</style>
<table width="516" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="19" bgcolor="#00CC99">
<input name="textfield" type="text" class="testo"></td>
<td height="19" bgcolor="#00CC99">[img]img/spacer.gif[/img]</td>
</tr>
</table>

[spacer è un'immagine trasparente per far ridimensionare correttamente la riga della tabella.]
Se tolgo il campo di testo la riga viene alta effettivamente 19 px..
Mistero?

<table width="516" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="19" bgcolor="#00CC99"></td>
<td height="19" bgcolor="#00CC99">[img]img/spacer.gif[/img]</td>
</tr>
</table>

**Federix** · 08-01-2004, 17:26

Io ho provato il tuo codice e devo dire che mi funziona bene, anche se tolgo l'immagine l'altezza della cella rimane sempre 19px. Ti posso un'altro consiglio:

codice:

.cella {
line-height: 19px;
}
.testo {
height: 19px;
}

<td height="19" bgcolor="#00CC99" class="cella"><input name="textfield" type="text" class="testo"></td>

**Tigrotto** · 08-01-2004, 18:00

No, neanche con il tuo codice mi cambia niente.
Comunque per quanto riguarda l'esempio che ho scritto io la differenza si vede togliendo il campo di testo non l'immagine.
In pratica quello che voglio è non vedere per niente le righe verdi sopra e sotto.. comunque grazie del supporto sinora

insisterò con altri tentativi

**Jasck** · 02-03-2005, 12:46

Crea uno stile css per il modulo (ad es. "testomodulo").
aggiungi allo stile:

codice:

margin: 0px;

il campo di testo lo inserisci come:

codice:

<input name="textfield" type="text"  class="testomodulo"   size="25">

In questo modo ti elimina gli spazi sopra e sotto il campo di testo.
Ti posto, comunque, uno stile che ho utilizzato per un modulo...dovrebbe fare al caso tuo (cambiando tipo,colore e dimensione del carattere)

codice:

.modulocerca {
	font-family: Verdana;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #466c8c;
	text-decoration: none;
	line-height: normal;
	vertical-align: middle;
	margin: 0px;
}

**Jasck** · 02-03-2005, 12:55

p.s.

anche il form deve avere lo stesso stile css del campo.
Quindi:

codice:

<form class="testomodulo" name="nome_form" method="post" action="">

Spero di esserti stato utile.

Discussione: Altezza campi di testo

Strumenti discussione

Ricerca discussione

Visualizza

Altezza campi di testo

Permessi di invio