Botón más ancho en Firefox

Damoc · #1 (**permalink**) 29/10/2010, 08:46

Buenos días a todos!

Estoy trabajando en un diseño y necesito que se vea lo más parecido posible en Firefox 3.6 e Internet Explorer 8... y tengo una pequeña diferencia de ancho en los botones que no logro solucionar.

Les paso un ejemplo para que vean a que me refiero...

Estos son los estilos. Quitándole el outline a los botones conseguí que tengan casi el mismo tamaño...

Código:

* {
	margin: 0;
	padding: 0;
	outline: 0;
}

button::-moz-focus-inner {
	border: 0;
}

button {
	border: none;	
}

Y estos son los botones...

Código:

<form>
	<button type="submit" name="miBoton1" value="1">Mi botón</button>
	<button type="submit" name="miBoton2" value="2">Mi botón</button>
</form>

Firefox deja 2 pixeles a la izquierda y a la derecha del texto, lo que hace que mi botón en Firefox sea 4 pixeles más ancho...

Como los botones van tener una imagen adentro, esa pequeña diferencia se nota mucho (además de que soy un poco obsesivo

).

Hasta ahora no he logrado dar con una instrucción CSS que haga que el ancho del botón en Firefox sea el mismo que el del Explorer, sin esos márgenes...

Si alguno tiene idea de que causa ese espacio y como eliminarlo, se lo agradecería...!

rodomiro · #2 (**permalink**) 29/10/2010, 13:14

No se si te ayude esto.. pero:

Para que en IE las cosas se vean bien y queden bien no debes modificar los objetos como divs, botones, etc.. si no el contenido.. por ej...

si quiero que un texto este a 2px del borde de una div, el "padding" o "margin" se lo doy al texto no a la div..

Eso tengo entendi yo y jamas e tenido problemas programando de esa forma... de lo contrario que alguien me corrija.

Saludos

Damoc · #3 (**permalink**) 29/10/2010, 16:40

Gracias por el consejo...

No obstante, muchas veces he modificado esas cosas y obtenido resultados satisfactorios tanto en Explorer como Firefox.

De todas formas, en este caso la diferencia de 2px no debe ser de padding o margin ya que al principio puse * para ponerlos en 0 en todos los elementos. Ni idea que estará generando esa separación...

rodomiro · #4 (**permalink**) 29/10/2010, 19:30

Provaste con

Código PHP:

  img { 
margin: 0 0 0 0; 
padding: 0 0 0 0; 
}

Saludos y suerte

p.d: si gustas pones el codigo completo.

Damoc · #5 (**permalink**) 29/10/2010, 21:32

Puse el código completo, solo había omitido la parte del encabezado...

Ahí va completo, de todas formas:

Código:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Botones</title>
<style>
* {
	margin: 0;
	padding: 0;
	outline: 0;
}

img {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

button::-moz-focus-inner {
	border: 0;
}

button {
	background-color: red;
	border: none;
}
</style>
</head>

<body>
<form>
	<button type="submit" name="miBoton1" value="1">Mi botón</button>
	<button type="submit" name="miBoton2" value="2"><img src="negro.jpg" alt="" /></button>
</form>
</body>

Le agregué lo que me dijiste en img. Igualmente en * ya estaba poniendo el padding y margin de img (y de todo lo demás, según entiendo) en 0, ¿no?

El segundo botón levanta una jpg de 20px por 20px que es donde se notan esos "márgenes". Firefox deja un 'padding' de 2px a la izquierda y a la derecha de los botones...

rodomiro · #6 (**permalink**) 30/10/2010, 11:43

Ahh comprendo.. mira esto me funciono en Mozilla...

Código PHP:

  <!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> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<style> 
* { 
    margin: 0 0 0 0; 
    padding: 0 0 0 0; 
} 
 
.botonimagen{ 
  margin:0 0 0 0; 
  padding:0 0 0 0; 
  background-image:url(negro.jpg); 
  background-repeat:no-repeat; 
  height:20px; 
  width:20px; 
  background-position:center; 
  border:none; 
} 
 
button::-moz-focus-inner { 
    border: none; 
} 
 
button { 
    background-color: red; 
    border: none; 
} 
 
</style> 
</head> 
 
<body> 
<form> 
    <button type="submit" name="miBoton1" value="1">Mi botón</button> 
    <button type="submit" name="miBoton2" class="botonimagen" value="2"></button> 
</form> 
</body> 
</html>

Ocupe una clase que le asigne al boton para darle el fondo, mira como quedo.

Saludos y suerte

Damoc · #7 (**permalink**) 30/10/2010, 16:19

Funcionó perfectamente! No se me había ocurrido para nada...

Gracias por la ayuda!

rodomiro · #8 (**permalink**) 30/10/2010, 20:56

De nada.

Saludos!