Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de input="text" en firefox problemas con la propiedad "height" en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/07/2010, 15:59
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
input="text" en firefox problemas con la propiedad "height"

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.
  #2 (permalink)  
Antiguo 28/07/2010, 00:25
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: input="text" en firefox problemas con la propiedad "height"

¿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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 28/07/2010 a las 01:51
  #3 (permalink)  
Antiguo 28/07/2010, 02:00
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input="text" en firefox problemas con la propiedad "height"

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.

Última edición por cristian_cena; 28/07/2010 a las 02:11
  #4 (permalink)  
Antiguo 28/07/2010, 12:01
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: input="text" en firefox problemas con la propiedad "height"

Intenta creciendo el alto y dejar solo padding a los lados... chao
Código CSS:
Ver original
  1. .txt {
  2. background:none repeat scroll 0 0 #CCCCCC;
  3. border:1px solid gray;
  4. font-family:verdana;
  5. font-size:0.8em;
  6. height:16px;
  7. line-height:16px;
  8. padding:0 3px;
  9. width:191px;
  10. }
  #5 (permalink)  
Antiguo 30/07/2010, 10:03
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input="text" en firefox problemas con la propiedad "height"

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?
  #6 (permalink)  
Antiguo 30/07/2010, 10:32
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: input="text" en firefox problemas con la propiedad "height"

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
  #7 (permalink)  
Antiguo 30/07/2010, 10:49
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 8 años, 5 meses
Puntos: 269
Respuesta: input="text" en firefox problemas con la propiedad "height"

ok, gracias che, un abrazo!

Etiquetas: firefox, propiedad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:14.