largo de boton distinto en IE6-7

[Snd234]

Hola que tal?

Bueno, otra vez problemas con IE, para variar...

Estoy realizando una aplicación WEB y dentro de una sección, hay un límite de ancho, y dentro de esta hay 2 botones.

Código HTML:

<p><input type="button" name="btnLogin" id="btnLogin" value="Iniciar sesi&oacute;n" class="input_Button" />
<input type="reset" name="btnResetLogin" id="btnResetLogin" value="Restablecer" class="input_Button" /></p> 

El CSS de los botones es:

Código HTML:

.input_Button {
    height: 28px;
    width: auto;
    padding: 0px 4px;
    margin: 0px;
    background-image: url(images/btn_static.png);
    border: 1px solid #999999;
    font-weight: bold;
}

.input_Button:hover {
    background-image: url(images/btn_hover.png);
}

En Firefox y Opera se ven perfectos...

Los botones quedan uno al lado de otro y alcanzan perfecto en la sección donde tiene un límite de ancho.

Pero en IE 6 y 7, ocurre esto:

Existe un gran espacio entre los bordes izquierdos y derechos del botón con respecto al inicio y fin del texto, lo que hace que el botón sea mas largo de lo debiera ser y por lo tanto no alcanzan los 2 botones a estar en la misma línea por lo que los ubica uno debajo del otro. Si coloco un texto mas corto, por ejemplo "Iniciar", obtengo el resultado que quiero, pero cuando el texto es mayor, ocurre el problema.

Entonces mi pregunta es como poder solucionar eso? para que, independiente del largo del texto del botón, el tamaño sea el adecuado en IE6 o 7?

[Ruyman]

La verdad que no tengo mucha idea, pero yo probaría a darle un padding de izquierda y derecha negativo por si funciona con los ie's y si fuera así usaría un condicional. O también darle un ancho fijo a los botones, que además creo que quedaría mejor todos los botones del mismo tamaño. Pero seguro que hay una forma más elegante de hacerlo.

Hoy también me tuve que pelear pero solo con ie7 en el resto iba bien, al final lo solucione pero me quede con una duda que preguntaré ahora en otro post, si no encuentro nada.

suerte.

[LoBo2024]

Yo le quitaba el padding y le ponía directamente un text-align: center; :)

[posavasos]

Añade "overflow:visible" al .input.Button

No lo he probado en IE 6 porque tengo problemas para abrirlo, sí en IE 7.

Nunca había utilizado esa solución, hasta ahora he utilizado width:0 para IE < 6 (con comentarios condicionales) pero me acabo de pasar por la web donde encontré esa solución y he visto en los comentarios lo de overflow:visible

An Even Better IE Button Width Fix : SixThings