28172 sujets

CSS et mise en forme, CSS3

Menu horizontal / sous menus verticaux et ie7

Bonjour,

J'ai un probleme de comprehension avec l'interpretation que fait ie7 de mon menu.
J'ai créé un menu horizontal. Certains liens ouvrent un sous menu vertical.

exemple :

#menu ul{
	display:none;
	position: absolute;
}
#menu li:hover{
	position:relative;
}
#menu li:hover > ul{display:block;position: absolute;}


ie7 ne réagit pas.

Lorsque j'utilise "IE developper Toolbar" sous ie7 je fais apparaitre mes sous menus et je vois qu'il rajoute une marge ou une hauteur (je ne sais pas vraiment) à chaque lien de mon sous menu.

Exemple :
upload/12593-Image2.png

Je vous joins ici le code et j'hébergerai ce soir une page d'exemple. J'avoue ne pas comprendre pourquoi ie7 agit ainsi (surtout pour la marge).

Si vous avez des pistes je suis preneur. Merci d'avance.

edit : voici la page d'exemple
edit2 : retrait du lien. Le contenu n'est plus à jour

Le html :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css">
#menu,#menu .sous-menu{margin0;padding:0;}
#menu li{
	list-style: none outside none;	
	float:left;
	position: relative;
}
.clearer{
	clear: both;
    height: 0;
    overflow: hidden;	
}
#menu a{
	border-style: solid ; 
	border-width: 1px ; 
	border-top-color: #626262 ;
	border-right-color: #a1a1a1 ;
	border-left-color: #424242 ;
	border-bottom-color: #c6c30 ;
	background:#424242;
	
	letter-spacing: 1px;
	text-decoration: none;
	font-family: helvetica,verdana,sans-serif;
    font-size: 9px;
    font-weight: bold;
    display:block;
    color:#fff;
    padding:6px 6px 3px 6px;
}
#menu a:hover{
	border-style: solid ; 
	border-width: 1px ; 
	border-top-color: #989898 ;
	border-right-color: #c2c2c2 ;
	border-left-color: #838383 ;
	border-bottom-color: #cbcbcb ;
	background:#838383;
}
#menu .sous-menu{
	display:none;
	 position: absolute;	
}
#menu li:hover > ul{display:block;position: absolute;}
#menu ul li {float:none;}
#menu ul a {
	font-weight: bold;
	text-align:left;
	white-space:nowrap;
	background:#e9e9e9;
	color:#a60000;
	border:solid 1px #fff;
}
#menu ul a:hover {
	border:solid 1px #fff;
	color:#fff;
}
#menu > li:hover{
	position:relative;
}
#menu li a:hover{
	position:relative;
}
</style>
<ul id="menu">
	<li><a href="index2.html" >ACCUEIL</a></li>
	<li><a href="#" >ABBAYE</a>
		<ul class="sous-menu">
			<li><a href="visite.html" >La visite</a></li>
			<li><a href="histoire.html" >L'histoire</a></li>
		</ul>
	</li>
	<li><a href="jardins.html" >JARDINS</a></li>
	<li><a href="#" >VIGNOBLES &amp; VINS</a>
		<ul class="sous-menu">
			<li><a href="vins_aoc.html" >Les vins d'appellation contr&ocirc;l&eacute;e</a></li>
			<li><a href="vins_pays.html" >Les vins de pays</a></li>
			<li><a href="bieres.html" >Nos bi&egrave;res</a></li>
			<li><a href="vignoble.html" >Le vignoble</a></li>
			<li><a href="tarifs.html" >Les tarifs</a></li>
			<li><a href="clients.html" >R&eacute;seau de vente</a></li>
		</ul>
	</li>
	<li><a href="auberge.asp" >AUBERGE</a></li>
	<li><a href="#" >EVENEMENTS</a>
		<ul class="sous-menu">
			<li><a href="index2.html" >Edito</a></li>
			<li><a href="index2.html" >Les dates</a></li>
			<li><a href="index2.html" >Les tarifs</a></li>
		</ul>
	</li>
	<li><a href="location.html" >RECEPTIONS</a></li>
	<li><a href="liens.html" >LIENS UTILES</a></li>
	<li><a href="actualite.asp" >ACTUALITES</a></li>
	<li><a href="contact.html" >CONTACT</a></li>
</ul>
<div class="clearer"></div>
</body>
</html>

Modifié par Ginko (23 Mar 2011 - 14:05)
J'ai corrigé l'un de mes bug sur ie7.

Le problème concernait l'espace entre mes divers liens des sous menu (voir capture d'écran de mon post précédent).

Chacun de mes liens (balise a) est en display block. Et ie7 semble avoir un problème d'interprétation avec les balises li dans ce genre de cas. Une explication ici.

Par contre je ne comprends toujours pas pourquoi ie7 n'arrive pas a faire apparaitre mes sous menus au survol de la souris.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css">

/* systeme de reset du menu */
#menu, #menu ul{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* //systeme de reset du menu */

#menu li{
	list-style: none outside none;	
	float:left;
	position: relative;
	display: inline;/* ie7 bug fix. si li>a est en dsiplay:block; mettre li en inline.sinon ajout d'espace entre les li>a*/
}
.clearer{
	clear: both;
    height: 0;
    overflow: hidden;	
}
#menu a{
	border-style: solid ; 
	border-width: 1px ; 
	border-top-color: #626262 ;
	border-right-color: #a1a1a1 ;
	border-left-color: #424242 ;
	border-bottom-color: #c6c30 ;
	background:#424242;
	
	letter-spacing: 1px;
	text-decoration: none;
	font-family: helvetica,verdana,sans-serif;
    font-size: 9px;
    font-weight: bold;
    display:block;
    color:#fff;
    padding:6px 6px 3px 6px;
}
#menu a:hover{
	border-style: solid ; 
	border-width: 1px ; 
	border-top-color: #989898 ;
	border-right-color: #c2c2c2 ;
	border-left-color: #838383 ;
	border-bottom-color: #cbcbcb ;
	background:#838383;
}
#menu .sous-menu{
	display:none;
	position: absolute;	
}
#menu li:hover > ul{display:block;position: absolute;}
#menu ul li {float:none;}
#menu ul a {
	font-weight: bold;
	text-align:left;
	white-space:nowrap;
	background:#e9e9e9;
	color:#a60000;
	border:solid 1px #fff;
}
#menu ul a:hover {
	border:solid 1px #fff;
	color:#fff;
}
#menu > li:hover{
	position:relative;
}

</style>
<ul id="menu">
	<li><a href="index2.html" >ACCUEIL</a></li>
	<li><a href="#" >ABBAYE</a>
		<ul class="sous-menu">
			<li><a href="visite.html" >La visite</a></li>
			<li><a href="histoire.html" >L'histoire</a></li>
		</ul>
	</li>
	<li><a href="jardins.html" >JARDINS</a></li>
	<li><a href="#" >VIGNOBLES &amp; VINS</a>
		<ul class="sous-menu">
			<li><a href="vins_aoc.html" >Les vins d'appellation contr&ocirc;l&eacute;e</a></li>
			<li><a href="vins_pays.html" >Les vins de pays</a></li>
			<li><a href="bieres.html" >Nos bi&egrave;res</a></li>
			<li><a href="vignoble.html" >Le vignoble</a></li>
			<li><a href="tarifs.html" >Les tarifs</a></li>
			<li><a href="clients.html" >R&eacute;seau de vente</a></li>
		</ul>
	</li>
	<li><a href="auberge.asp" >AUBERGE</a></li>
	<li><a href="#" >EVENEMENTS</a>
		<ul class="sous-menu">
			<li><a href="index2.html" >Edito</a></li>
			<li><a href="index2.html" >Les dates</a></li>
			<li><a href="index2.html" >Les tarifs</a></li>
		</ul>
	</li>
	<li><a href="location.html" >RECEPTIONS</a></li>
	<li><a href="liens.html" >LIENS UTILES</a></li>
	<li><a href="actualite.asp" >ACTUALITES</a></li>
	<li><a href="contact.html" >CONTACT</a></li>
</ul>
<div class="clearer"></div>
</body>
</html>
Bonjour,

Le code source n'a pas de doctype. N'as pas non plus de balise ouvrante html et les styles sont placés dans le body.

Première chose à faire : corriger le code !

Seconde chose à faire : apprendre le JavaScript pour faire un menu déroulant proprement.
Le but de mettre tout dans les balises style etc est de permettre aux gens de rapidement tester, voir mon code en copiant/collant le tout. Et d'isoler uniquement mon problème.

Deuxième point. Je n'ai aucun contrôle sur les pages ou je dois modifier ce menu. C'est la raison pour laquelle j'ai un charset iso 8859-1 (plutôt qu'utf-8). Et c'est aussi pour cette raison que je ne peux pas utiliser de reset.css (Je reset uniquement mon menu). C'est un vieux site ou je n'ai pas la main.

J'ai des balises <html></html>, je ne comprends pas vraiment la remarque à ce niveau.

Je considère le javascript comme une béquille de dernier recourt dans ce cas préçis. Ce menu css fonctionne sur tous les navigateurs je suis uniquement confronté à une erreur d'interprétation(ou un bug) d'ie.

Et débat mis à part, je ne considère pas qu'un menu propre est un menu fait avec du javascript.

Bref je souhaite résoudre ce problème en css uniquement. Apres reflexion j'aurais du le dire dans mon premier post.

Merci de la réponse néanmoins.
Euh... Regarde le code source de ta page d'exemple... Le problème n'est pas la balise style, mais le fait qu'elle ne soit pas placée au bon endroit (ajouté au fait qu'il manque un doctype et <html>)...




PS. : penser que le JS c'est sale c'est la preuve d'un manque de connaissance.
Ha ok tu as lu directement la page que j'héberge. J'ai dû faire une erreur de copier/coller mea culpa. Je comparais au code que j'ai copié dans mes deux post. Et la balise ouvrante est bien présente.

Le <style> est mal placé en effet. Mais ça n'intervient pas dans le bug que je souhaite régler.

Pour répondre au ps. Je n'ai pas dit que javascript était sale. Mais que résoudre mon bug css en faisant intervenir du javascript ne m'intéressait pas. Et je trouve que c'est même sortir l'artillerie lourde. Ce bug a une solution css, par contre je ne comprends pas encore laquelle.

Je ne dois travailler que dans le périmètre de ce menu et je souhaite le faire uniquement en css. Si des gens ont des pistes avec ces contraintes merci de m'éclairer.

Par contre en aparté et sans offense, tu es la seule personne qui a répondu à mes posts. Tu m'as pris de haut dès ta première réponse. Ce qui ne me dérangerait pas trop si ça m'avait aidé mais ouvrir un débat sur la pertinence du javascript je suis pas sûr de comprendre en quoi ça va aider.
Ginko a écrit :
Ce bug a une solution css, par contre je ne comprends pas encore laquelle.
Non, ce bug a une solution HTML : Rajouter un doctype (et ça fait trois fois que je le dis).
Sujet clos
Aller à