Foros del Web » Creando para Internet » CSS »

Espacio no deseado en un div

Estas en el tema de Espacio no deseado en un div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/07/2009, 16:48
Avatar de Daerun  
Fecha de Ingreso: julio-2009
Mensajes: 2
Antigüedad: 8 años, 5 meses
Puntos: 0
Espacio no deseado en un div

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.
  #2 (permalink)  
Antiguo 08/07/2009, 17:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Espacio no deseado en un div

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 09/07/2009, 05:17
Avatar de Daerun  
Fecha de Ingreso: julio-2009
Mensajes: 2
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Espacio no deseado en un div

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">
  #4 (permalink)  
Antiguo 09/07/2009, 06:25
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Espacio no deseado en un div

Mejor pon un enlace a la página problemática.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 08:35.