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ó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?