La <div> en-tete
L'espace sous la photo montre tout simplement que la hauteur de ta <div> en-tete n'est pas la même entre les deux pages définition et ir. J'ai mis un moment à trouver pourquoi, et pourtant c'est là comme le nez au milieu de la figure !
Tu as choisi, dans la page ir, de traiter ton titre à l'aide d'une balise <h6>, ce qui est tout à fait approprié pour un titre (mais j'aurais plutôt choisi <h1> puisque c'est le titre principal). Et tu ne l'as pas fait pour la page définition. La différence, c'est les options par défaut de la balise <h6>, avec à coup sûr le texte en gras (font-weight:bold;), et très certainement un margin-top qui explique le décalage. Pour t'en faire la démonstration, passe rapidement d'une page à l'autre par le menu...
Plus généralement, ton source HTML n'est pas très propre, avec toutes ces clauses de style directement dans les balises, qu'il faudrait vraiment remonter dans la feuille de style : ne fais pas le travail à moitié, c'est trop dommage... Sur l'exemple qui te préoccupe, si tu avais associé un style à la balise <h6> (utilisée dans les deux pages), tu n'aurais pas eu ce problème
h6 {font-family:Comic sans MS, arial;color:#030c60;font-size:48px;text-align:center;}
...
<div id="en-tete"><h6>LeDico de l'Info</h6>...</div>
N'est-ce pas plus simple à écrire... et à relire ?
(à suivre : pied de page)