Buttons y text input de misma forma

HiToGoRoShi · #1 (**permalink**) 11/03/2012, 11:03

Que tal muchachos estoy haciendo un sistema, y me gustaria que los buttons y text input se vean el mismo alto ambos ya que en firefox por defecto se ven ordenado pero en IE se ponen horrible

DanielRGB · #2 (**permalink**) 12/03/2012, 04:01

bienvenido al mundo real de los diseñadores webs :)

prueba en vez de usar altos y anchos con pixeles... a usar em

width: 150px; ----> width: 9.375em;
height: 150px; ----> height: 9.375em;

un saludo!

kseso? · #3 (**permalink**) 12/03/2012, 06:57

Cita:

Iniciado por DanielRGB:4140230

bienvenido al mundo real de los diseñadores webs :)

prueba en vez de usar altos y anchos con pixeles... a usar em

width: 150px; ----> width: 9.375em;
height: 150px; ----> height: 9.375em;

un saludo!

Esa igualdad sólo será cierta para un único valor de 1em=Xpx
Para rodos los demás (1em=X-n ó 1em=X+n) ya será falsa.

Lo que debería hacer el consultante es adjuntar sus códigos (html+css) y describir mejor cuáles son las diferencias y la versión del navegador

emprear · #4 (**permalink**) 12/03/2012, 16:03

Esas discrepancias entre navegadores es bastante comun, esta es una alternativa para corregirlo

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>text y submit iguaes</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
#form1 input {vertical-align:top;}
#form1 input[type="text"] {width:140px; padding:8px; background:#ccc; border:none;}
#form1 input[type="submit"] {width:80px; padding:8px; border:none; color:#fff; background: #554F9D;cursor:pointer;}
#form1 input[type="submit"]::-moz-focus-inner {border:0;}
 
/*]]>*/
</style>
</head>
<body>
<form method="post" id="form1" action="#">
<input type="text" value="" name="buscar" />
<input type="submit" class="submit" value="buscar" />
</form>
</body>
</html>

Funciona en IE8+, Opera, Firefox, Chrome, en Safari sigue haciendo de las suyas, pero por ahi creo que hay un fix dando vueltas.

Saludos