input="text" en firefox problemas con la propiedad "height"

[cristian_cena]

Hola foreros, resulta que estoy dando estilos css a los inputs de un formulario y en firefox 3.5.11 la propiedad "height" con la que doy altura a la caja del input genera el problema de que el texto que introduce el usuario se ve cortado en su parte inferior, (el texto se desplaza hacia abajo y es cortado por la caja del input).

Aquí el código:

Código HTML:

<input type="text" name="correo" class="txt" /> 

Código:

.txt {
font-size: 11px;
width:191px;
height:10px;
padding:3px 3px 3px 3px;
border:1px solid gray;
background:#ccc;
}

Probé con line-height y nada. Reconozco que el problema está en la propiedad height puesto que la quito y funciona perfecto.

¿Alguna solución a este bug?
¿dispone firefox de algo así como los comentarios condicionales que usamos para ie, o como puedo trabajar solo para firefox 3.5 en este problema?

Desde ya muchas gracias por su ayuda.

[C2am]

¿no será que al usar un tamaño de fuente mayor que el tamaño de la caja, la fuente no quiera achicarse o cuanto menos agacharse un poquito para caber dentro de esa caja?
Tal vez algo de contorsionismo funcionaria ¿o no?
saludos

[cristian_cena]

Hola tocayo como va, mira, por obra y gracia del espíritu santo ahora funciona, pero evidentemente ocurre un problema con firefox, si no me crees mira, aqui el sitio, compara la visualización de los inputs en diferentes navegadores, notarás que en firefox (yo estoy en el 3.5) se da un leve descenso de la tipografía hacia el border-bottom del input, al mismo tiempo prueba con escribir algo en el input y luego seleccionar ese texto y jugar con el scroll del raton y notarás también un leve movimiento.

Espero que todo valla bien, un saludo.

[alexk]

Intenta creciendo el alto y dejar solo padding a los lados... chao

Código CSS:

.txt {
background:none repeat scroll 0 0 #CCCCCC;
border:1px solid gray;
font-family:verdana;
font-size:0.8em;
height:16px;
line-height:16px;
padding:0 3px;
width:191px;
}
 

[cristian_cena]

Hola alex, como va cumpa, excelente la respuesta, muchisimas gracias che, disculpa la demora en responder.

mira, la única modificación que tube que realizar para que se vea perfecto fue dejarle el padding top, o sea, solo quitar el padding-bottom.

.txt {
background:none repeat scroll 0 0 #CCCCCC;
border:1px solid gray;
font-family:verdana;
font-size:0.8em;
height:13px;
line-height:16px;
padding:3px 3px 0 3px;
width:191px;
}

En breve lo subo y te comparto un link, la verdad es que es un detalle que no lo sabía, contigo siempre se aprende algo nuevo hermano jaj. un abrazo.

Otra cosa, tienes idea de como hacer para que ie7 tome la pseudoclase :focus? ¿algún material sobre este tema?

[alexk]

bueno te lo puse asi por otros navegadores... en los input suelo usar una altura fija y sin paddings... ya que FF lo alinea verticalmente automatico sin hacer nada pero otros navegadores no, pero bueno si te funciona perfecto :)

Lo de la pseudoclase :focus se supone que con la libreria de IE7.... debe funcionar, para estos casos y si uso jquery pues lo hago desde alli pero bueno prueba a ver chao

[cristian_cena]

ok, gracias che, un abrazo!