Etrange en css avec IE7 : problème de height

Bonjour,

après avoir écumé des forums, google, et fait des tests petit a petit, j'en arrive à la conclusion que je viens de perdre mon dimanche. J'ai du coup décidé de vous poser la question :

Tout fonctionne bien sous Firefox 3 mais pas sous IE7. Voilà mon problème :
Je désire faire une grille de 8000 cases de 5x5 px dans une grille qui fait 500x400 px.

Je crée donc 8000 cases avec des div de 5x5 en float left dans un div de 500x400 dont voici le code :

<div style="width:500px; height:400px; background:url(../images/jeux/grille/bg_grille500x400.jpg); background-repeat:no-repeat;" id="bg_grille">
<?php
$ligne = 8000;
for ($j=0;$j<$ligne;$j++){
?>
<a href="index.php">
<div class="caseGrille"></div>
</a>
<?php
}
?>
</div>

et voici mon css :


.caseGrille{
background-image:url(../images/jeux/grille/case.gif);
float: left;
/margin-bottom:-7px;
height: 5px;
width: 5px;
visibility: visible;
background-repeat: no-repeat;
cursor:pointer;
}


et voila ce que ça me donne suivant les 2 navigateurs :
Une image est plus parlante : http://chalex.phpnet.org/problemeie7.gif

Sous IE des sauts non aléatoire m'embete vraiment et j'ai pas trouvé de solution. Je suis prêt à tout entendre, et pour info, j'ai testé les position relative,absolute,et static ben que dalle ouais !!

Merci d'avance pour les ames charitables qui se pencherons sur mes pixels détériorés ...