Estilo de Input en Chrome

aganglada · #1 (**permalink**) 23/07/2011, 09:54

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/

pitufoweb · #2 (**permalink**) 23/07/2011, 10:34

Website Under Review

Saludos

aganglada · #3 (**permalink**) 23/07/2011, 11:29

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!

aganglada · #4 (**permalink**) 23/07/2011, 12:14

Ya esta disponible, a ver si me podéis ayudar..

emprear · #5 (**permalink**) 23/07/2011, 12:46

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    
    .gets{
    background: url(s.png) no-repeat center #E09D00;
    width: 30px;
    height:26px;
    border: none;
    cursor: pointer;
    color: transparent;
    padding: 0px;
}
 
.s{
    width:200px;
    height: 24px;
    line-height: 24px;
    border: solid 1px #ccc;
    padding: 0px;
}
</style>
</head>
<body>
<div class="navs">
<form action="#" method="get">
<input class="s" type="text" id="s" name="s" value="" /><input class="gets" type="submit" value="x" id="searchsubmit" />
</form>
</div>
</body>
</html>

Saludos

aganglada · #6 (**permalink**) 23/07/2011, 13:38

Cita:

Iniciado por emprear

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
    
    .gets{
    background: url(s.png) no-repeat center #E09D00;
    width: 30px;
    height:26px;
    border: none;
    cursor: pointer;
    color: transparent;
    padding: 0px;
}
 
.s{
    width:200px;
    height: 24px;
    line-height: 24px;
    border: solid 1px #ccc;
    padding: 0px;
}
</style>
</head>
<body>
<div class="navs">
<form action="#" method="get">
<input class="s" type="text" id="s" name="s" value="" /><input class="gets" type="submit" value="x" id="searchsubmit" />
</form>
</div>
</body>
</html>

Saludos

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