Quitar espacios entre elemento <button>?

chefnelone · #1 (**permalink**) 30/06/2009, 03:09

Hola
Tengo 3 botones generados con <button> y no puedo quitar el espacios que se ve entre ellos (deberían estar juntos sin espacios):
Se ve así:

Este es el código:

Código HTML:

<html>
<head>
<style>
button {
background:transparent;
border:0px;
padding:0px;
margin:0px;
}
img{
border:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<button class="prev"><img src="bt-semana-anterior.png" alt="image"  /></button>
<button class="today"><img src="bt-semana-actual.png" alt="image"  /></button>
<button class="next"><img src="bt-semana-siguiente.png" alt="image" /></button>
</body>
</html>

Le he puesto margin, padding, border con valor 0. Pero no funciona.
Que me está faltando?
Gracias

kseso? · #2 (**permalink**) 30/06/2009, 07:20

Añadiendo unos márgenes negativos corregirás la separación de "button"

Código css:

Ver original.prev {margin-right:-5px;}
.today {margin: 0 -5px;}
.next {margin-left: -5px;}

ajusta los valores para que sean exactos.

Sin entrar en el error que es colocar de esa forma el elemento "button".

Cita:

document type does not allow element "button" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

Cita:

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

Si no fuese realmente un botón y sí un menú, sería mejor que hicieses eso con una lista

Un saludo

moNTeZIon · #3 (**permalink**) 30/06/2009, 07:24

Qué tal chefnelone.
La verdad es que he notado lo siguiente, no sé si te servirá de ayuda, puesto que desconozco por qué usas esa etiqueta llamada "button".
Si sustituyes los controles "button" por controles "span", modificando también la etiqueta de cierre, claro, consigues reducir ese espacio, que no sé por qué motivo, te lo pone al usar las etiquetas button.
Con este cambio, se reduce el espacio de separación, aunque no del todo, puesto que te falta ponerlo todo en la misma línea. Te en cuenta que el escribir el control en la siguiente línea, te está poniendo un espacio en blanco. Si lo pones todo junto, problema resuelto.

Código:

<span class="prev"><img src="bt-semana-anterior.png" alt="image" /></span><span class="today"><img src="bt-semana-actual.png" alt="image" /></span><span class="next"><img src="bt-semana-siguiente.png" alt="image"/></span>

Espero haberte ayudado, algo..
Saludos.

chefnelone · #4 (**permalink**) 30/06/2009, 07:56

Gracias por las ideas

Cita:

Iniciado por kseso?

Si no fuese realmente un botón y sí un menú, sería mejor que hicieses eso con una lista

No suelo usar <button>, pero es código generado por javascript y cuando lo cambio por <ul> el script deja de funcionar.

Buena idea la del margen negativo.

kseso? · #5 (**permalink**) 30/06/2009, 08:07

Cita:

Iniciado por chefnelone

Gracias por las ideas

No suelo usar <button>, pero es código generado por javascript y cuando lo cambio por <ul> el script deja de funcionar.

Buena idea la del margen negativo.

Nah, no se merecen.

Sobre el script, ya puestos, ahí al lado están los "chicos de los js en su cueva"

. Quizás te convenga investigar y cambiarlo.

Suerte.

chefnelone · #6 (**permalink**) 30/06/2009, 08:18

Cita:

Iniciado por kseso?

Añadiendo unos márgenes negativos corregirás la separación de "button"

Código css:

Ver original.prev {margin-right:-5px;}
.today {margin: 0 -5px;}
.next {margin-left: -5px;}

No funciona en IE, me había olvidado de chekearlo.
existe algun truco para IE ?

kseso? · #7 (**permalink**) 30/06/2009, 08:32

p****** ie
dale a button {position: absolute;}
y a cada una de las clases

Cita:

.prev {left:0;}
.today {left:150px;}
.next {left:300px;}

Los valores de px dependerán del tamaño de cada imagen.

Esto lo puedes hacer en un comentario condicional para que los navegadores sigan con las anteriores.

Pero sopesa la sugerencia de modificar el js.

Un saludo

pistonasos · #8 (**permalink**) 06/07/2009, 00:51

Fijate usando en la hoja en cascada:

Código:

.prev{float:left}
.today{float:left}
.next{float:left}

Amì el tema de float: me causò muchos dolores de cabeza,fijate sino float:right; el ùnico problema es que seguramente te va a quedar a la izquierda o a la derecha de la pàgina.

buzu · #9 (**permalink**) 06/07/2009, 02:30

pon tu javascript y le torcemos la mano hasta que en lugar de decir <button></button> diga <span></span> o lo que quieras que diga.

chefnelone · #10 (**permalink**) 06/07/2009, 09:08

habia olvidado este tema.
El unico que me da problemas es IE6, y así se quedara (el problema no es grave) por el momento
gracias por las ideas.