Foros del Web » Creando para Internet » CSS »

largo de boton distinto en IE6-7

Estas en el tema de largo de boton distinto en IE6-7 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/09/2007, 12:05
Avatar de Snd234  
Fecha de Ingreso: mayo-2007
Ubicación: Frente al PC
Mensajes: 413
Antigüedad: 10 años, 6 meses
Puntos: 2
largo de boton distinto en IE6-7

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?
__________________
KIBIT.cl
  #2 (permalink)  
Antiguo 26/09/2007, 16:14
 
Fecha de Ingreso: junio-2007
Mensajes: 67
Antigüedad: 10 años, 5 meses
Puntos: 1
Re: largo de boton distinto en IE6-7

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.
  #3 (permalink)  
Antiguo 28/09/2007, 03:15
 
Fecha de Ingreso: febrero-2002
Ubicación: Sabadell
Mensajes: 253
Antigüedad: 15 años, 9 meses
Puntos: 5
Re: largo de boton distinto en IE6-7

Yo le quitaba el padding y le ponía directamente un text-align: center; :)
  #4 (permalink)  
Antiguo 28/09/2007, 14:12
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
Re: largo de boton distinto en IE6-7

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:55.