Posicionando div de 5x5px como un tablero de ajedrez.

[alca87]

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.