Foros del Web » Creando para Internet » CSS »

Estilo de Input en Chrome

Estas en el tema de Estilo de Input en Chrome en el foro de CSS en Foros del Web. Hola Buenas, tengo dos input, uno de busqueda y el otro el boton de buscar, resulta que en chrome sale un poco más abajo de ...
  #1 (permalink)  
Antiguo 23/07/2011, 09:54
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 10 meses
Puntos: 3
Estilo de Input en Chrome

Hola Buenas, tengo dos input, uno de busqueda y el otro el boton de buscar, resulta que en chrome sale un poco más abajo de lo que deberia salir, Firefox lo maqueta perfectamente poniendolos en linea, aver si me podeis ayudar, llevo un buen rato intentando buscarlo y nada. Aquí os dejo el enlace para que lo probeis en los dos navegadores. Muchas Gracias de antemano!

http://aganglada.web44.net/
  #2 (permalink)  
Antiguo 23/07/2011, 10:34
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.147
Antigüedad: 9 años, 4 meses
Puntos: 181
Respuesta: Estilo de Input en Chrome

Website Under Review




Saludos
__________________
------------- " La felicidad no llega de afuera, nace desde dentro. " -------------
  #3 (permalink)  
Antiguo 23/07/2011, 11:29
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Estilo de Input en Chrome

Perdona, es que como estoy haciendo las pruebas en un hosting gratuito me tienen que validar la cuenta, dentro de un rato estará operativo. Muchas Gracias!
  #4 (permalink)  
Antiguo 23/07/2011, 12:14
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Estilo de Input en Chrome

Ya esta disponible, a ver si me podéis ayudar..
  #5 (permalink)  
Antiguo 23/07/2011, 12:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 9 años, 11 meses
Puntos: 1567
Respuesta: Estilo de Input en Chrome

aganglada:

no analicé el css, supongo que estará bien, pero lo primero que tenes que hacer es darle un valor al value del input que hace el submit, si no chrome no lo renderiza correctamente Podrías poner un espacio en blanco tan solo, pero si haces esto, el problema te aparecería entonces en IE, la solución, poner un valor y fijar el color como transparente, Además esto que funcionaría en ie 9/7, vaya a saber por que no lo hace correctamente en ie8, con lo que hay que trabajar sobre el input de texto.
Como sea, esto trabaja bien en todos lados

Ej:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7.    
  8.     .gets{
  9.     background: url(s.png) no-repeat center #E09D00;
  10.     width: 30px;
  11.     height:26px;
  12.     border: none;
  13.     cursor: pointer;
  14.     color: transparent;
  15.     padding: 0px;
  16. }
  17.  
  18. .s{
  19.     width:200px;
  20.     height: 24px;
  21.     line-height: 24px;
  22.     border: solid 1px #ccc;
  23.     padding: 0px;
  24. }
  25. </head>
  26. <div class="navs">
  27. <form action="#" method="get">
  28. <input class="s" type="text" id="s" name="s" value="" /><input class="gets" type="submit" value="x" id="searchsubmit" />
  29. </form>
  30. </div>
  31. </body>
  32. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Última edición por emprear; 23/07/2011 a las 13:06
  #6 (permalink)  
Antiguo 23/07/2011, 13:38
Avatar de aganglada  
Fecha de Ingreso: julio-2011
Ubicación: Málaga
Mensajes: 14
Antigüedad: 5 años, 10 meses
Puntos: 3
Respuesta: Estilo de Input en Chrome

Cita:
Iniciado por emprear Ver Mensaje
aganglada:

no analicé el css, supongo que estará bien, pero lo primero que tenes que hacer es darle un valor al value del input que hace el submit, si no chrome no lo renderiza correctamente Podrías poner un espacio en blanco tan solo, pero si haces esto, el problema te aparecería entonces en IE, la solución, poner un valor y fijar el color como transparente, Además esto que funcionaría en ie 9/7, vaya a saber por que no lo hace correctamente en ie8, con lo que hay que trabajar sobre el input de texto.
Como sea, esto trabaja bien en todos lados

Ej:

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7.    
  8.     .gets{
  9.     background: url(s.png) no-repeat center #E09D00;
  10.     width: 30px;
  11.     height:26px;
  12.     border: none;
  13.     cursor: pointer;
  14.     color: transparent;
  15.     padding: 0px;
  16. }
  17.  
  18. .s{
  19.     width:200px;
  20.     height: 24px;
  21.     line-height: 24px;
  22.     border: solid 1px #ccc;
  23.     padding: 0px;
  24. }
  25. </head>
  26. <div class="navs">
  27. <form action="#" method="get">
  28. <input class="s" type="text" id="s" name="s" value="" /><input class="gets" type="submit" value="x" id="searchsubmit" />
  29. </form>
  30. </div>
  31. </body>
  32. </html>

Saludos
Muchas Gracias por tu aporte, efectivamente era exactamente eso lo que fallaba, muchísimas gracias!

Etiquetas: chrome, estilo, firefox, input
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 19:15.