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.