Hola, como dice el título, trato de hacer un pequeño recuadro con divs de 5 píxeles de alto por 5 de ancho, pero al realizarlos, me quedan como una especie de escalera, lo he probado en firefox3 beta 5 y en ff2.
Es como si me metiera retornos de carro. Lo que quiero hacer es un div que contenga a su vez otros div más pequeños, cuadraditos que forman un dibujo parecido a un tablero de ajedrez.
Pego el css:
Código:
body {
text-align:center;
}
#contenedor {
position: relative;
width: 180px;
border:1px solid #333333;
background-color:#FFF8F0;
margin: 60px auto;
}
.a1 {
position: relative;
display: both;
left: 0px;
top: 1px;
width: 5px;
height: 5px;
background-color: red;
}
.a2 {
position: relative;
display: both;
left:10px;
top: 1px;
width:5px;
height: 5px;
background-color: green;
}
.a3 {
position: relative;
display: both;
left:20px;
top: 1px;
width: 5px;
height: 5px;
background-color: blue;
}
.b1 {
position: relative;
display: both;
left:0px;
top: 2px;
width: 5px;
height: 5px;
background-color: aqua;
}
.b2 {
position: relative;
display: both;
left:10px;
top: 2px;
width: 5px;
height: 5px;
background-color: yellow;
}
.b3 {
position: relative;
display: both;
left:20px;
top: 2px;
width: 5px;
height: 5px;
background-color: silver;
Y el html:
Código:
<div id="contenedor">
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
Gracias de antemano, como no puedo poner enlaces no os pongo el ejemplo, pero si alguien quiere verlo que lo diga. Un saludo.