Style width input text vs input submit

[Ronin46]

Hola,

Estoy tratando de que un input type="text" y un input type="submit" tengan el mismo ancho.

Para ello hago tal que así:

Código:

.Form
	{
		width:160px;
	}

Código:

A: <input class="Form" name="A" type="text">
<input class="Form" name="B" type="submit" value="B">

Pues bien, con eso hay una diferencia en el ancho.

Ahora bien, si pongo:

Código:

.Form
	{
		width:160px;
               border:0;
	}

entonces ya tiene el mismo ancho, pero... ¡lo quiero con borde!

Gracias.

[alexk]

no entiendo, el primer ejemplo es como lo quieres.... ya que no tiene borde

el segundo le pones borde y asi no lo quieres...
WTF?....

ya esta arreglado o que pasa? no entiendo perdona jeje

[Ronin46]

El primer ejemplo, efectivamente, es como lo quiero, con los bordes que traen por defecto los campos, ahora bien, como vi que tenía distinto ancho (a pesar de ponerle 160px a los dos), probé a ponerle el borde a 0 para ver si la diferencia de ancho era debido a eso, y efectivamente, si pongo el borde a 0, los campos tienen el mismo ancho.

Si no pongo el borde a 0, el campo del input submit, tiene que ser 5px mayor que el del input text, para que queden del mismo ancho

P.d: Al menos en FF

[alexk]

pues restale el width a "158px" modelo de div css
asi el ancho total sera de "160px" chao!...

[Ronin46]

Ahora el que no entiende soy yo xD

Lo que quiero decir es, a igualdad de tamaño (160px), los input text miden más que los input submit.

Obviamente, puedo poner el width del input text a 160px y del input submit a 155px, de esa forma ya tendrían el mismo ancho, que creo que es lo que me has respondido.

Mi pregunta iba más bien por si había una forma que valiese para los dos (no tener que hacer un estilo distinto para cada uno).

Y ya de paso, ¿por qué hay esa diferencia dándole el mismo ancho?

[Ronin46]

Investigando un poco más, creo que ya sé lo que está pasando.

En los input type text el border se suma al ancho, mientras que en los input type submit el border va incluido en el ancho, de ahí la diferencia entre anchuras.

Por ejemplo:
a) input type text: ancho 160px y border 10px = 170px
b) input type submit: ancho 160 px y border 10px = 160 px (dado que en realidad pasaría a ser width 150px y border 10px

¿Alguien me puede explicar como evitar eso?