Probleme d'espace entre deux div sous FF

Bonjour,

Voici mon CSS :

div.cadre_menu_session {
	margin: 0px 15px 0px 0px;
	background: #fff;
	padding:0px 0px 8px 0px;
    border: 1px solid #699;
}

div.cadre_menu_session div.user{
	font-size:7pt;
	color: black;
	text-decoration: none;
	text-align: center;
	margin : 3px 0px 5px 0px;
	padding: 0px 0px 0px 0px;
}

div.cadre_menu_session div.link_menu{
	padding:0px;
	margin:0px;
}

div.cadre_menu_session div.link_menu a{
	font-size:7pt;
	color: black;
	text-decoration: none;
	margin : 0px 0px 3px 15px;
	text-align: left;
	background-image: url(../img/bouton_vertf.gif);
	background-repeat: no-repeat;
	background-position: 0px;
	padding : 0px 0px 0px 12px;
}

div.cadre_menu_session div.link_menu a:hover{
	font-size:7pt;
	color: black;
	text-decoration: underline;
	margin : 0px 0px 3px 15px;
	text-align: left;
	background-image: url(../img/bouton_vertf.gif);
	background-repeat: no-repeat;
	background-position: 0px;
	padding : 0px 0px 0px 12px;
}

avec

<div class="cadre_menu_session">
	<div class="user">    Bonjour IDENTIFIANT
	</div>
	<div class="link_menu"><a href="#">Modifier son profil</a></div>
	<div class="link_menu"><a href="#">Se déconnecter</a></div>                    </div>

L'espace sous IE 7 entre les deux lignes n'est pas du tout le meme que sous FF... IE semble plus juste, je ne comprends pas l'espace de 6 px entre les deux lignes sous FF.

Merci pour l'aide.

Titanic
Modifié par Titanic (10 May 2007 - 21:03)

Rien à voir, mais ceci :

div.cadre_menu_session div.link_menu a{
	font-size:7pt;
	color: black;
	text-decoration: none;
	margin : 0px 0px 3px 15px;
	text-align: left;
	background-image: url(../img/bouton_vertf.gif);
	background-repeat: no-repeat;
	background-position: 0px;
	padding : 0px 0px 0px 12px;
}
div.cadre_menu_session div.link_menu a:hover{
	font-size:7pt;
	color: black;
	text-decoration: underline;
	margin : 0px 0px 3px 15px;
	text-align: left;
	background-image: url(../img/bouton_vertf.gif);
	background-repeat: no-repeat;
	background-position: 0px;
	padding : 0px 0px 0px 12px;
}

peut s'écrire ainsi :

div.cadre_menu_session div.link_menu a{
	font-size:7pt;
	color: black;
	text-decoration: none;
	margin : 0px 0px 3px 15px;
	text-align: left;
	background: url(../img/bouton_vertf.gif) no-repeat;
	padding-left: 12px;
}
div.cadre_menu_session div.link_menu a:hover{
	text-decoration: underline;
}

Et toujours au passage, les tailles de texte en points (pt) ne sont pas adaptées pour l'écran, et pas terrible pour l'accessibilité.
Quelques pistes pour bien gérer la taille du texte et laisser l'utilisateur l'adapter à ses besoins :
Accessibilité : Agrandissement de la taille des polices
Typographie web : gérer la taille du texte avec les « em »

Et pour finir, juste une suggestion : on n'est pas obligé de n'utiliser que des div. Il existe d'autres éléments en HTML.


PS : et pour le problème lui-même, ça sera sans doute plus parlant avec un exemple en ligne.