28173 sujets

CSS et mise en forme, CSS3

bonjour

Je suis un heureux utilisateur du menu déroulant de Raphaël GOETTER.

Avec IE7, le fonctionnement est impeccable.

Problème: avec Firefox 2.0.0.6, dans les sous-menus, chaque ligne est séparée de la précédente par un espace un peu plus grand que la hauteur de l'écran.

Voici exactement le code CSS que j'utilise:

body { margin: 0; padding: 0; background: white; font: 80% verdana, arial, sans-serif; 
} 
dl, dt, dd, ul, li { margin: 0; padding: 0; list-style-type: none; color: #333399; 
} 
#menu { position: float; /* placement du menu, à modifier selon vos besoins */ top: 0; left: 0; z-index:100; width: 100%; /* correction pour Opera */ 
} 
#menu dl { float: left; width: 15em; 
} 
#menu dt { cursor: pointer; text-align: center; font-weight: bold; background: #ccc; border: 1px solid gray; margin: 1px; 
} 
#menu dd { display: none; border: 1px solid gray; 
} 
#menu li { text-align: center; background: #fff; 
} 
#menu li a, #menu dt a { color: #333399; text-decoration: none; display: block; height: 100%; border: 0 none; 
} 
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus { background: #eee; 
} 
#site { position: absolute; z-index: 1; top : 70px; left : 10px; color: #000; background-color: #ddd; padding: 5px; border: 1px solid gray; 
} 


Merci par avance de vos suggestions.

Francois
Bonjour,

Juste pour essayer, supprime le “height: 100%”.
Et donne-lui, au <a>, des dimensions en px.
 
bonjour Gihef et merci de ta réponse.

Conseil avisé, ça marche, je lui ai mis 20px.

J'ai même essayé avec un libellé qui était plus long que la colonne où apparaissent les libellés de sous-menus, ça marche encore.

Merci de ton aide.

Francois