Foros del Web » Creando para Internet » CSS »

Problema con campo de texto

Estas en el tema de Problema con campo de texto en el foro de CSS en Foros del Web. Soy muy novato en esto de programacion web, y resulta que me descargue un plugin Javascript que permite personzalizar el diseño de los formularios, el ...
  #1 (permalink)  
Antiguo 25/12/2009, 01:21
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Problema con campo de texto

Soy muy novato en esto de programacion web, y resulta que me descargue un plugin Javascript que permite personzalizar el diseño de los formularios, el plugin se llama "Niceforms". Todo funciona bien en los navegadores y qué sorpresa no funciona en IE (como cosa rara). El campo de texto se desfigura en IE. Agradecería mucho si me podueden ayudar:

Firefox:


IE:


Aqui esta el CSS:
Código:
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none;}
.NFTextCenter {height:24px; background:url(Imagenes/center.png) repeat-x 0 0; padding:3px 0; margin:0; float:left; line-height:15px;}
.NFTextLeft, .NFTextRight {width:7px; height:24px; vertical-align:middle; float:left;}
.NFTextLeft {background:url(Imagenes/Left.png) no-repeat 0 0;}
.NFTextRight {background:url(Imagenes/Right.png) no-repeat 0 0;}
  #2 (permalink)  
Antiguo 25/12/2009, 09:26
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con campo de texto

Y si le metes un tamaño fijo al input con width?
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 25/12/2009, 13:40
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con campo de texto

Cita:
Iniciado por hades87 Ver Mensaje
Y si le metes un tamaño fijo al input con width?
Ya lo hice pero igual no funcionó.
  #4 (permalink)  
Antiguo 25/12/2009, 14:47
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Problema con campo de texto

tendrías la página por ahí? para ver mas en profundidad el código?
__________________
No diseñes usando tablas.
  #5 (permalink)  
Antiguo 25/12/2009, 15:35
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con campo de texto

Cita:
Iniciado por hades87 Ver Mensaje
tendrías la página por ahí? para ver mas en profundidad el código?
Claro, aqui esta la URL
Código:
http://wowlatino.webcindario.com/Index.html
PD: Otra pregunta, como se hace para que en el campo de texto ponga un valor de "Buscar..." y al darle clic este desaparezca?.
Saludos!

Última edición por C0UNDE; 25/12/2009 a las 16:14
  #6 (permalink)  
Antiguo 25/12/2009, 16:27
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Problema con campo de texto

Hola,

creo que te estas complicando, ya que puedes darle los estilos que quieras al formulario con CSS y no necesitas utilizar una opción en javascript, mira:

Código HTML:
Ver original
  1. <form id="buscar" action="buscar.php" method="post">
  2. <input type="text" id="buscart" name="buscart" value="Buscar...." />
  3. <input type="submit" id="buscarb" name="buscarb" />

Código CSS:
Ver original
  1. #buscar input{
  2. float: left;
  3. }
  4.  
  5. #buscart {
  6. width: 150px;
  7. height: 80px;
  8. background: url(images/fondot.png) no-repeat; /* Esta es la imagen de fondo del campo para buscar*/
  9.  
  10. #buscarb {
  11. width: 80px;
  12. height: 80px;
  13. background: url(images/fondob.png) no-repeat; /*Esta es la imagen del botón de Buscar */
  14. }
__________________
Grupo Telegram Docker en Español
  #7 (permalink)  
Antiguo 25/12/2009, 17:16
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con campo de texto

Cita:
Iniciado por Carlangueitor Ver Mensaje
Hola,

creo que te estas complicando, ya que puedes darle los estilos que quieras al formulario con CSS y no necesitas utilizar una opción en javascript, mira:

Código HTML:
Ver original
  1. <form id="buscar" action="buscar.php" method="post">
  2. <input type="text" id="buscart" name="buscart" value="Buscar...." />
  3. <input type="submit" id="buscarb" name="buscarb" />

Código CSS:
Ver original
  1. #buscar input{
  2. float: left;
  3. }
  4.  
  5. #buscart {
  6. width: 150px;
  7. height: 80px;
  8. background: url(images/fondot.png) no-repeat; /* Esta es la imagen de fondo del campo para buscar*/
  9.  
  10. #buscarb {
  11. width: 80px;
  12. height: 80px;
  13. background: url(images/fondob.png) no-repeat; /*Esta es la imagen del botón de Buscar */
  14. }
Gracias por tu ayuda pero el problema es que no se como hacer para que quede igual con CSS y que quede funcional en IE.

PD: Creo que el problema no esta en el CSS porque fui a W3C y me validó el CSS. Si alguien sabe alguna solución se lo agradeceria mucho.

Saludos!

Última edición por C0UNDE; 25/12/2009 a las 17:22
  #8 (permalink)  
Antiguo 25/12/2009, 17:31
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Problema con campo de texto

Con la forma que te di no debes tener problemas, y te lo dejé así por que la solución que has usado esta generando mucho código innecesario.

De todas formas, en el código que tienes prueba agregar float:left a NFButton.

Otra cosa, validar en la W3C no garantiza que se visualice correctamente.

Saludos
__________________
Grupo Telegram Docker en Español
  #9 (permalink)  
Antiguo 25/12/2009, 19:17
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con campo de texto

Cita:
Iniciado por Carlangueitor Ver Mensaje
Con la forma que te di no debes tener problemas, y te lo dejé así por que la solución que has usado esta generando mucho código innecesario.

De todas formas, en el código que tienes prueba agregar float:left a NFButton.

Otra cosa, validar en la W3C no garantiza que se visualice correctamente.

Saludos
Probe lo que me dijiste pero no funcionó. La verdad es que he intentado hacerlo en CSS pero no me queda igual como en el Javascript, si hay alguna forma de hacerlo en CSS y que funcione bien con el IE seria genial.

Saludos!
  #10 (permalink)  
Antiguo 25/12/2009, 22:09
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con campo de texto

Resulta que probe con otro script parecido que hace la misma funcion de cambiar los formularios y ya arregle el problema del campo de texto pero ahora tengo otro problema. El boton de búsqueda no se ve, sólo se ve cuando esta en modo hover y active, y cuando presiono el boton no hace nada, verifique que todo estaba en orden, la verdad no se que es lo que pase. Y otra cosa como hago para que en el campo de texto, el texto quede centrado de arriba a abajo, solo me pasa en Firefox. Sé que es mucho pedir pero de verdad se los agradeceria mucho si me pudieran ayudar, aquí esta la web:
Código:
http://wowlatino.webcindario.com/Index.html
PD: El Script se llama "jNice" por si no saben como funciona el script.
Saludos!
  #11 (permalink)  
Antiguo 26/12/2009, 19:26
 
Fecha de Ingreso: octubre-2009
Ubicación: Medellín - Colombia
Mensajes: 15
Antigüedad: 8 años, 2 meses
Puntos: 0
Respuesta: Problema con campo de texto

Bueno, problema resuelto, tuve que modifucar mi codigo HTML y CSS. Muchas gracias por su ayuda, ya pueden cerrar el tema.
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 20:12.