Problème affichage menu dans IE

26 déc. 2008, 18:04

Hellohooo

je m'en viens quérir la sagesse et la savoir auprès des illuminés des css!

J'ai un menu (sans js!) type dropdown qui réagit normalement dans FF, Opera, Safari, mais pas dans IE(8) où le sub menu passe en dessous des autres éléments, alors qu'il devrait être par dessus...
Comme un dessin peut être plus explicite qu'un long paragraphe voici une capture:

Voici la partie css:

Code : Tout sélectionner

/* MENU */
ul#navigation-1 {
	margin: 0;
	padding: 1px 0;
	list-style: none;
	width: 100%;
	height: 21px;
	border-top: 1px solid #6e98c2;
	border-bottom: 1px solid #6e98c2;
	font: normal 8pt verdana, arial, helvetica;
	text-align: center;
}
ul#navigation-1 li {
	margin: 0;
	padding: 0;
	display: block;
	float: left;
	position: relative;
	width: 148px;
}
ul#navigation-1 li a:link, ul#navigation-1 li a:visited {
	padding: 4px 0;
	display: block;
	text-align: center;
	text-decoration: none;
	background-color: #6e98c2;
	color: #ffffff;
	width: 148px;
	height: 13px;
}
ul#navigation-1 li:hover a, ul#navigation-1 li a:hover, ul#navigation-1 li a:active {
	padding: 4px 0;
	display: block;
	text-align: center;
	text-decoration: none;
	background-color: #90c4f2;
	color: #ffffff;
	width: 146px;
	height: 13px;
	border-left: 1px solid #ffffff;
	border-right: 1px solid #ffffff;
}
ul#navigation-1 li ul.navigation-2 {
	margin: 0;
	padding: 1px 1px 0;
	list-style: none;
	display: none;
	background-color: #ffffff;
	width: 146px;
	position: absolute;
	top: 21px;
	left: -1px;
	border: 1px solid #6e98c2;
	border-top: none;
}
ul#navigation-1 li:hover ul.navigation-2 {
	display: block;
}
ul#navigation-1 li ul.navigation-2 li {
	width: 146px;
	clear: left;
	width: 146px;
}
ul#navigation-1 li ul.navigation-2 li a:link, ul#navigation-1 li ul.navigation-2 li a:visited {
	clear: left;
	background-color: #6e98c2;
	padding: 4px 0;
	width: 146px;
	border: none;
	border-bottom: 1px solid #ffffff;
	position: relative;
	z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li:hover a, ul#navigation-1 li ul.navigation-2 li a:active,
 ul#navigation-1 li ul.navigation-2 li a:hover {
	clear: left;
	background-color: #90c4f2;
	padding: 4px 0;
	width: 146px;
	border: none;
	border-bottom: 1px solid #ffffff;
	position: relative;
	z-index: 1000;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
	position: absolute;
	left: 145px;
	top: -2px;
	padding: 1px 1px 0 1px;
	border: 1px solid #6e98c2;
	border-left: 1px solid #6e98c2;
	background-color: #ffffff;
	z-index: 900;
}
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3 {
	display: block;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link, ul#navigation-1 li ul.navigation-2 li 
ul.navigation-3 li a:visited {
	background-color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a, ul#navigation-1 li ul.navigation-2 li
 ul.navigation-3 li a:hover, ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active {
	background-color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li a span {
	position: absolute;
	top: 0;
	left: 132px;
	font-size: 12pt;
	color: #90c4f2;
}
ul#navigation-1 li ul.navigation-2 li:hover a span, ul#navigation-1 li ul.navigation-2 li a:hover span {
	position: absolute;
	top: 0;
	left: 132px;
	font-size: 12pt;
	color: #ffffff;
}
/* Fin Menu */

Je m'interroge, les bras ballants, le regard vide...

Comment rectifier ça?

26 déc. 2008, 23:04

Il faut jouer avec le z-index.
Tu mets le menu déroulant à 1000 et l'autre menu statique qui devrait pas passer par dessus, tu le mets à 0.

Je pense que ça devrait marcher

Sinon, ton code CSS ne sert à rien si tu ne mets pas l'HTML

27 déc. 2008, 00:02

Hello chris,

merci de t'être penché sur ma questionnette! en effet le z-index j'y ai songé, je m'en vais faire quelque test...

par contre je ne comprends pas ta réflexion quand tu dis:

Sinon, ton code CSS ne sert à rien si tu ne mets pas l'HTML

Bien entendu j'utilise conjointement css & html ( sinon je ne vois pas l'intérêt de créer des fichiers css

); par ailleurs il est évident que la solution à ma question repose sur l'usage des css, et c'est la raison pour laquelle je n'ai posté que la partie css de mes codes.

En tous cas encore merci chris!!

27 déc. 2008, 00:55

Je voulais dire que si tu ne nous poste pas aussi le code HTML sur le forum, ton CSS ne nous sert pas à grand chose

27 déc. 2008, 16:22

Mdr, désolé j'ai mal interprété ta phrase...

bon, ben le html c'est pas compliqué, c'est un <ul> + <li> avec la classe correspondante...

Code : Tout sélectionner

<div id="global">
	    <?php include ('includes/header.php'); ?>
		<?php include ('includes/sub_header.php'); ?>
		<div id="center">
                <div id="left">
                    
<ul id="navigation-1">
		<li><a href="index.php">Accueil</a></li>
		<li><a href="list.php">Catalogue</a>
			<ul class="navigation-2">
				<li><a href="restauration.php">Restaurants</a></li>
				<li><a href="hotel.php">Hôtels/gites</a></li>
				<li><a href="immobilier.php">Immobilier</a></li>
				<li><a href="commerce.php">Commerce</a></li>
				<li><a href="batiment.php">Bâtiment</a></li>
				<li><a href="artisanat.php">Artisanat</a></li>
				<li><a href="loisirs.php">Loisirs</a></li>
				<li><a href="sport.php">Sports</a></li>
				<li><a href="service.php">Services</a></li>
				<li><a href="sante.php">Santé/soins</a></li>
				<li><a href="culture.php">Culture</a></li>
				<li><a href="autre.php">Autres</a></li>
			</ul>
		</li>
		<li><a href="register.php">Inscription</a></li>
		<li><a href="map.php">Carte</a></li>
		<li><a href="about.php">About</a></li>
		<li><a href="contact.php">Contact</a></li>
	</ul>


                </div>
                <div id="right">

........

30 déc. 2008, 01:15

Bien entendu j'utilise conjointement css & html ( sinon je ne vois pas l'intérêt de créer des fichiers css );

Tu peux faire aussi du CSS avec du XML...
Ton problème est-il résolu ?

30 déc. 2008, 11:55

Hi Aureusms,

j'avais pas vu ta réponse (merci d'ailleurs), et pour te répondre: beh non, j'ai essayé de modifier les z-index mais ça n'y fait rien...
IE me les brise là

J'ai déjà fait pas mal de petites modifs rien que pour lui, mais là ça commence à être soulant!

Qu'est-ce qu'on peut faire?

30 déc. 2008, 12:37

OkOK... Bien en réfléchissant il se pourrait que IE interprète mal les choses... (je sais : redondant).
Bon j'ai une idé&e mais je ne sais pas si cela va fonctionner :
Tu créer 2 div :

Une avec tes menus
Une avec le reste de ta page mais sans les headers

La tu appliques une position absolue à tes deux div + un Z-index. Ou essaye de mettre navigation-1 en position absolue pour le sortir du flux...

30 déc. 2008, 12:42

Qu'est-ce qu'on peut faire?

Déjà t'expliquer pourquoi chrislabricole te demande le code html (et non php) :

On voudrait pouvoir reproduire ton problème, le tester en live dans un vrai browser et faire des modifications avant de te répondre. Une capture d'écran c'est facile à modifier, certes, mais le résultat ne va pas beaucoup t'aider

Il faudrait donc le code html (source, fonction "afficher la source" de ton navigateur") complet d'une page qui présente le problème en plus du CSS que tu as donné.

Sinon, la piste du z-index que l'on t'a donnée est la bonne, je pense que tu n'as juste pas réussi tes modifications. Persévère

Et aide-nous, pour qu'on puisse t'aider.

30 déc. 2008, 13:03

Ouep Calimero, regarde la source d'une page sur http://stephanzr.com/vitrinevercors

C'est sur ce site (en construction! donc merci de m'épargner les remarques désobligeantes et/ou condescendantes

hein! (j'rigole, en vrai je suis ouvert aux retour constructifs!)) que j'utilise ce menu...

30 déc. 2008, 15:54

Ouep Calimero, regarde la source d'une page sur http://stephanzr.com/vitrinevercors

Il y a un souci de codage au niveau du commentaire du script Adsense, ligne 159. Une fois ce souci corrigé, le validateur constate 73 erreurs dans le code XHTML.

Quant à l'utilisation de la propriété z-index, elle n'est valable que si elle s'applique à un élément positionné.

Essaie d'ajouter le code suivant :

Code : Tout sélectionner

.leftboxes h3, .leftboxes h4 {
  position: relative;
  z-index: 0;
}

30 déc. 2008, 16:30

Merci pour l'info Victor, je l'ignorais...

bon ben j'ai essayé, j'ai mis mon leftboxes h3 en relative avec un z-index à 0... et ça marche toujours pas!

mes neurones comencent à fumer, mon cerveau se liquéfie, je sens que je vais sombrer en depression!

31 déc. 2008, 01:46

Comme l'a signalé Victor il y a (beaucoup ?) d'erreurs dans ton code HTML.
Je ne garantis pas que ton problème vienne entièrement de cela, mais c'est totalement possible !

Essaies déjà par corriger tes erreurs dans ton code HTML, et ensuite, si le problème persiste, nous chercherons ensemble d'où peut venir ce problème

31 déc. 2008, 05:09

Ouep ça sera une bonne chose de faite, je vais m'y employer!

Edit:

Bon beh je viens de passer un bon moment à inspecter mon code, et j'ai corrigé tout ce que j'ai pu (il y avait un </div> en trop, l'attribut alt manquant sur toutes mes images, un ul dans un span)... la majeure partie des erreurs ne venait pas de ce que j'ai codé mais d'un script (google, addthis, ou additious); je ne peux donc rien y faire si ce n'est le virer; sans ce blem mon document est validé!
Voici donc ce que j'obtiens après avoir corrigé mes (quelques) erreurs personnelles et viré les scripts qui ne sont pas de moi

This document was successfully checked as XHTML 1.0 Transitional!

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Essaies déjà par corriger tes erreurs dans ton code HTML, et ensuite, si le problème persiste, nous chercherons ensemble d'où peut venir ce problème

Le problème persiste...

Problème affichage menu dans IE

Qui est en ligne