[Résolu] Espace indésirable sous un menu (Opéra/Safari)

Hello,
Je viens de retravailler la mise en page de mon site perso (CSS) et je me heurte à deux petits problèmes de compatibilité.

Le premier se manifeste sous Opéra et Safari, un espace blanc apparaît sous mon menu de navigation :

http://www.omicronlab.net/upload/upic-0204046001235682042.png

Le second est spécifique à IE6, mon menu latéral gauche est disposé anarchiquement, mes "margin" ne sont pas respectés :

http://www.omicronlab.net/upload/upic-0871489001235682183.png

J'ai tenté de changer mes unités, de forcer des width et/ou height, rien n'y fait.
Auriez vous une solution ?

Merci d'avance
Modifié par Akhilleus (27 Feb 2009 - 01:43)

Salut,

pour le premier problème je dirais que cela est dû à la taille (et l'arrondi) de la police utilisée (avec FF il suffit d'augmenter une fois la taille pour avoir le même souci) : je pense qu'en rajoutant un line-height équivalent au font-size sur les liens et sur les spans ça disparaîtra.

Ce qui donne :

div#right-column ul#nav li a {
   font-size: 1.5em;
   line-height: 1.5em;
   ...
}

div#right-column ul#nav li a span.description {
   font-size: 0.65em;
   line-height: 0.65em;
   ...
}

Pour le second Florent en parle dans Impact sur le rendu de la mise en forme du code HTML.
Modifié par Heyoan (26 Feb 2009 - 22:35)

Merci pour ta réponse,
Le second problème est résolu (il a suffit d'aligner tous les éléments du menu comme le suggère Florient dans son article).

Pour ce qui est du premier problème, je patauge vraiment, le fait de spécifier un line-height n'arrange rien, cela m'oblige à redéfinir les paddings des liens du menu et le margin du bloc inférieur (content) et le problème persiste sous opéra
Modifié par Akhilleus (26 Feb 2009 - 23:49)

Une autre tentative : j'ai rajouté ça à ton css d'origine (ce qui permet -en bonus - d'augmenter la taille de la police en gardant ton menu visible) :

div#right-column ul#nav {
	overflow: hidden;
}

div#right-column ul#nav li a {
	padding: 0.3em 0.5em;
	width: auto;
	min-width: 6.9em;
}

div#content {
	margin: 0;
}

Un grand merci, c'est résolu

J'ai du spécifier une largeur fixe pour les liens du menu : le "auto" provoquait une instabilité lors du focus sur firefox.

div#right-column ul#nav li a {
     width: 6.9em;
     min-width: 6.9em;
}

Et ajouter un "margin-top" au bloc "content" qui en faisait à sa tête sous IE6.

<!--[if lte IE 6]>
     <style type="text/css">div#content { margin: 4.55em 0 0 0; }</style>
<![endif]-->

Encore merci.
Modifié par Akhilleus (27 Feb 2009 - 01:38)