Foros del Web » Creando para Internet » CSS »

Botón más ancho en Firefox

Estas en el tema de Botón más ancho en Firefox en el foro de CSS en Foros del Web. 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... ...
  #1 (permalink)  
Antiguo 29/10/2010, 09:46
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Pregunta Botón más ancho en Firefox

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...!
  #2 (permalink)  
Antiguo 29/10/2010, 14:14
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Botón más ancho en Firefox

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
  #3 (permalink)  
Antiguo 29/10/2010, 17:40
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Botón más ancho en Firefox

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...
  #4 (permalink)  
Antiguo 29/10/2010, 20:30
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Botón más ancho en Firefox

Provaste con

Código PHP:
img {
margin0 0 0 0;
padding0 0 0 0;

Saludos y suerte

p.d: si gustas pones el codigo completo.
  #5 (permalink)  
Antiguo 29/10/2010, 22:32
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Botón más ancho en Firefox

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...
  #6 (permalink)  
Antiguo 30/10/2010, 12:43
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Botón más ancho en Firefox

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>
* {
    
margin0 0 0 0;
    
padding0 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 {
    
bordernone;
}

button {
    
background-colorred;
    
bordernone;
}

</
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
  #7 (permalink)  
Antiguo 30/10/2010, 17:19
Avatar de Damoc  
Fecha de Ingreso: octubre-2010
Mensajes: 26
Antigüedad: 7 años, 1 mes
Puntos: 0
Respuesta: Botón más ancho en Firefox

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

Gracias por la ayuda!
  #8 (permalink)  
Antiguo 30/10/2010, 21:56
 
Fecha de Ingreso: agosto-2010
Mensajes: 156
Antigüedad: 7 años, 3 meses
Puntos: 1
Respuesta: Botón más ancho en Firefox

De nada.

Saludos!

Etiquetas: ancho, firefox
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 16:29.