Espacio no deseado en un div

Daerun · #1 (**permalink**) 08/07/2009, 15:48

Hola a todos, esta es mi primera consulta aqui

Bien, el problema que tengo es que intento hacer una representación de un teclado con botones que enlacen a diferentes partes de la página. Los botones son imagenes cuadradas con una letra en medio, igual que en un teclado.
He conseguido cuatro filas de botones que dan ese efecto, pero me surge un problema, y es que en firefox, sobre cada una de las filas aparece un pequeño espacio de 1 o 2 píxeles que rompe la composición; este espacio se superpone con la parte inferior de la fila de arriba.

El código es este:

En la página

Código:

<div id="alfabetico4">
<div id="letraw"><a href="url.php"><img src="imagen"/></a></div>
<div id="letrax"><a href="url.php"><img src="imagenf"/></a></div>
<div id="letray"><a href="url.php"><img src="imagen"/></a></div>
<div id="letraz"><a href="url.php"><img src="imagen"/></a></div>
</div>

En la hoja de estilo (este código es el de la fila inferior, y el de la última letra de esta misma fila; las demás son iguales)

Código:

#alfabetico4 {
	width: 104px;
	height: 26px;
	position: absolute;
	top: 104px;
	left: 39px;
	background: none;
	padding: 0px;
	margin: 0px;
}

#letraz {
	position: relative;
	float: left;
	padding: 0px;
	margin: 0px;
}

#letraz a {
	width: 20px;
	height: 20px;
	background: url(imagen) no-repeat;
	border-top: #660099 3px outset;
	border-right: #ae59d8 3px outset;
	border-bottom: #ae59d8 3px outset;
	border-left: #660099 3px outset;
	margin: 0px;
	padding: 0px;
}

#letraz a:hover {
	background: url(imagen) no-repeat;
	border-top: #660099 3px inset;
	border-right: #ae59d8 3px inset;
	border-bottom: #ae59d8  3px inset;
	border-left: #660099 3px inset;
}

Ese "width: 20px; height: 20px;" lo he colocado tanto ahi en "#letraz a" como en "#letraz" y el resultado es el mismo.

kseso? · #2 (**permalink**) 08/07/2009, 16:21

Puede deberse al subrayado de los enlaces o al outline de las imágenes.
Prueba a añadir a los enlaces "text-decoration: none" y colocar un "reset" a tu css que incluya al menos:

Cita:

* {margin:0; padding:0; border:0; outline:none; position: relative;}

y asegurarte que estás utilizando un DOCTYPE correcto en tu documento.

Un saludo

Daerun · #3 (**permalink**) 09/07/2009, 04:17

Pues no ha funcionado, se ve igual. Aunque no estoy seguro de haber entendido lo del "reset": lo que he hecho es incluir esa línea que me has puesto al principio de todo de mi css.

Y por cierto, el doctype lo tengo así:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

kseso? · #4 (**permalink**) 09/07/2009, 05:25

Mejor pon un enlace a la página problemática.