Problema con campo de texto

[C0UNDE]

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;}

[hades87]

Y si le metes un tamaño fijo al input con width?

[C0UNDE]

Iniciado por hades87

Y si le metes un tamaño fijo al input con width?

Ya lo hice pero igual no funcionó.

[hades87]

tendrías la página por ahí? para ver mas en profundidad el código?

[C0UNDE]

Iniciado por hades87

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!

[Carlangueitor]

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:

<form id="buscar" action="buscar.php" method="post">
<input type="text" id="buscart" name="buscart" value="Buscar...." />
<input type="submit" id="buscarb" name="buscarb" />
 

Código CSS:

#buscar input{
float: left;
}
 
#buscart {
width: 150px;
height: 80px;
background: url(images/fondot.png) no-repeat; /* Esta es la imagen de fondo del campo para buscar*/
 
#buscarb {
width: 80px;
height: 80px;
background: url(images/fondob.png) no-repeat; /*Esta es la imagen del botón de Buscar */
}
 

[C0UNDE]

Iniciado por Carlangueitor

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:

<form id="buscar" action="buscar.php" method="post">
<input type="text" id="buscart" name="buscart" value="Buscar...." />
<input type="submit" id="buscarb" name="buscarb" />
 

Código CSS:

#buscar input{
float: left;
}
 
#buscart {
width: 150px;
height: 80px;
background: url(images/fondot.png) no-repeat; /* Esta es la imagen de fondo del campo para buscar*/
 
#buscarb {
width: 80px;
height: 80px;
background: url(images/fondob.png) no-repeat; /*Esta es la imagen del botón de Buscar */
}
 

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!

[Carlangueitor]

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

[C0UNDE]

Iniciado por Carlangueitor

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!

[C0UNDE]

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!

[C0UNDE]

Bueno, problema resuelto, tuve que modifucar mi codigo HTML y CSS. Muchas gracias por su ayuda, ya pueden cerrar el tema.