Display:block capricieux

Bonjour,

L'ai créé un menu composé d'éléments <div> contenant un lien vers les diverses pages de mon site. Afin de rendre la totalité de la surface du div réactive, j'ai défini la propriété de la balise <a> sur display:block.
Problème: cela ne fonctionne pas sur la page d'accueil, mais ben sur les autres pages.

Voici mon code.
Sur chaque page du site: <?php include("includes/menu.php");?>
La page menu :

<div><!--menu de navigation principal-->
  <div class="nav1">
   <a class="a1" href="Index.php">Accueil</a>
  </div>
    <div class="nav1">
   <a class="a1" href="Agenda.php">Agenda</a><br />
  </div>

<div class="nav1">
   <a class="a1" href="album.php">Album</a>
  </div>
.... etc

La propriété css:

.nav1/** type bouton**/
 {
 position:relative;
 float:left;
 top:10px;
 background-color:#C9AAAD;
 width:96px;
 height:35px;
 margin:3px 3px 20px 3px;
 border-top:1px solid black;
 border-right:2px solid black;
 border-bottom:2px solid black;
 border-left:1px solid black;
 font-family:verdana;
 font-size:11px;
 vertical-align:middle;
 text-align:center;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }
.a1 /** liens de type bloc, non soulignés et noirs**/
 {
 text-decoration:none;
 color:black;
 font-weight:bold;
 display:block;
 width:100%;
 height:100%;
 }

Si quelqu'un a une idée du bug....
Merci d'avance
Christian

EDIT : Ajout des balises de code (la coloration syntaxique). Explications disponibles ici :ICI Merci d'y penser dans tes prochains messages.