Link to home
Start Free TrialLog in
Avatar of jerrrrry
jerrrrry

asked on

horizontal css menu bugging in ie8 maybe ie7

hello i have an horizontal menu but it has somme problèms with ie8
i made a screenshot to show you
so has it full of levels and sublevels, maybe i made a mistake and
i 'm asking you for gentle debugging

bugs with <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
what happens is sometimes third levels is displayed while it shouldn'tb
and there is also something like a delay on displaying the data
bugs with <meta http-equiv="X-UA-Compatible" content="IE=IE8">
very strange it displays wrongly the data!

any help appreciated
thanks
bug2.gif
bug3.gif
Avatar of mreuring
mreuring
Flag of Netherlands image

Without being able to look at actual code, I can try to guess what might be going on but I wouldn't stand much of a chance. So, can you link us to a location where we can inspect this phenomena?
Hi jerrrrry,
It would be best if you can provid a link or attach the source code so it would be possible to track down the issues
Avatar of jerrrrry
jerrrrry

ASKER

here is the code!
sorry i thought it was done!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>

<title>www.employability.be</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<style type="text/css" media="screen">
*{
margin:0;
padding:0;
}

body{
  background-color:#e6e6e6;
  font-family:Helvetica,Verdana,Arial,sans-serif;
_behavior:url(cssHoverFix.htc);
  } 
  
div#container{
width:960px;
margin:0 auto;
margin-top:10px;
/*background-color:white;*/
}

div#header{
width:100%;
height:125px;
background-color:#7A96DF ;
background-image: url(images/bandeau2.gif);
}


#language{
height:20px;
vertical-align :middle;
border: 0px solid #C8D1D9;
font-weight: bold;
font-size:14px;
}
 
#search { 
	width:260px;
	height:25px; 
	position: absolute;
	left:700px;
	top:90px;
	}

div#content{
/*background-color:yellow;*/
 background: #ccc url(images/image_de_fond.png) repeat; 
color:#666666;
width:960px;
/*background-repeat:repeat;*/
float:left;

}

div#col_gauche{
width: 190px;/*modif*/
/* background-color:yellow; */
margin-left:-770px;
/*height:700px;*/
float:left;
}

div#col_centre{
padding-left:190px;
/*margin-right:205px;*/
width: 580px;
/*background-color:yellow;*/
float:left;
/*height:700px;*/
}
#texte_gauche{
width:180px;
padding:5px;}

div#col_droite{

float:right;
padding:5px; /*modif*/
width: 175px;
/*background-color:#FFF;*/
/*height:700px;*/
}
div#footer{
clear:both;
background-color:purple;
background-color:#999999;
float:left;
color:#CCC;
width:100%;
text-align:center;
height:25px;
line-height:25px;
font-size: 14px;
}
  
  
  
 #navigation {width:188px;
font-size:16px;
font-family:Helvetica,Verdana,Arial,sans-serif;
}

#navigation ul{margin:0px; padding:0px; background-color:#666;}

#navigation ul a{color:#FFF;}

 #navigation ul ul{
display:none;
position:absolute;
left:188px;
top:0px;
border:#fff solid;
border-width:1px;
background-color:#999;
}

#navigation ul li{
height:90px;
font-size:18px;
font-family:Helvetica,Verdana,Arial,sans-serif;
list-style:none;
background-image: url(images/fleche2.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; 
padding-left:10px;
color:#FFF;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
cursor:pointer;}

#navigation ul li a{text-decoration:none;}


#navigation ul li:hover {background-color:#F90; position:relative;
background-image: url(images/list.gif);
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px; 
padding-left:10px;
}


#navigation ul li:hover ul{display:block;
}

#navigation ul ul li{
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
font-size:16px;
text-decoration:none;
height:45px;
width:188px;
float:left; 
padding-left:25px;
display:inline;}

#navigation ul ul li:hover {
background-image: url(images/list.gif);
border:none;
border-top:#fff solid;
border-bottom:#fff solid;
border-width:1px;
padding-left:25px;
}

#navigation li:hover ul li ul {display:none;}
#navigation ul ul li ul {left:210px;background-color:#999;}
#navigation ul ul li:hover ul {display:block; z-index: 5;}


#navigation li:hover ul li ul li ul {display:none;}
#navigation ul ul li ul li ul {left:210px;background-color:#999;}
#navigation ul ul li ul li:hover ul {display:block; z-index: 5;}

  
  
  
  
  
</style>

  </head>
    <body>
		<div id="container">
		
			
			<div id="content">
				<div id="col_centre">
					<div class="col">
					
					<h1>Le guide RH de la consultance</h1>

					</div>	
					
						
					
						
					
				</div>
			
			<div id="col_gauche">
				
				  <div id="navigation">
		    
		    <ul>
			<li><br/><a href=""> Développement personnel</a>
		
				<ul>
					<li><a href="">Profil de personnalité :</a>
						<ul>
					<li><a href="">&nbsp;types de personnalité</a></li>
					<li><a href="">&nbsp;tests et questionnaires</a></li>	
						</ul>
					</li>
			
					<li><a href="">Projet de vie, motivation</a></li>
			
					<li><a href="">Bilan de compétences</a></li>
			
					<li><a href=""> Feedback 360°</a></li>
					<li><a href=""> Aptitudes à communiquer</a></li>
			
					<li><a href="">Communication orale :</a>
						<ul>
							<li><a href="">&nbsp;face à face</a></li>
							<li><a href="">&nbsp;par téléphone</a></li>
							<li><a href="">&nbsp;par téléphone mobile</a></li>
							<li><a href="">&nbsp;par skype ou autre</a></li>
						</ul>
					</li>
					<li><a href="">Communication écrite :</a>
						<ul>
							<li><a href="">&nbsp;rapports, prise de notes</a></li>
							<li><a href="">&nbsp;e-mailing</a></li>
							<li><a href="">&nbsp;  twitter</a></li>
							<li><a href="">&nbsp;par skype ou autre</a></li>	
						</ul>
					</li>
					<li><a href=""> Lecture rapide</a></li>
			
					<li><a href=""> Communication non-verbale</a></li>
			
			
					<li><a href="">Connaissances en langues :</a>
						<ul>
							<li><a href="">&nbsp;Enseignement en groupe</a></li>
							<li><a href="">&nbsp;Enseignement individuel</a></li>
							<li><a href="">&nbsp;Enseignement par téléphone</a></li>
							<li><a href="">&nbsp;Langues de l'Union Européenne</a></li>
							<li><a href="">&nbsp;Autres langues européennes</a></li>
							<li><a href="">&nbsp;Langues orientales</a></li>
							<li><a href="">&nbsp;Laboratoires de langues</a></li>
							<li><a href="">&nbsp;Méthodes d’auto-apprentissage</a></li>	
						</ul>
					</li>
			
					<li><a href="">Créativité</a>
						<ul>
							<li><a href="">&nbsp;La pensée non-conventionnelle</a></li>
							<li><a href="">&nbsp;Mind mapping</a></li>
							<li><a href="">&nbsp;La pensée latérale</a></li>
							<li><a href="">&nbsp;La résolution de problèmes</a></li>
						</ul>
					</li>
			
					<li><a href="">Gestion du stress, problèmes de :</a>
						<ul>
							<li><a href="">&nbsp;Alcoolisme</a></li>
							<li><a href="">&nbsp;Drogues</a></li>
							<li><a href="">&nbsp;Harcèlement moral</a></li>
							<li><a href="">&nbsp;Harcèlement sexuel</a></li>
							<li><a href="">&nbsp;Burn-out</a></li>
							<li><a href="">&nbsp;Suicide</a></li>
							<li><a href="">&nbsp;Techniques de relaxation</a></li>
							<li><a href="">&nbsp;Réagir à la violence, à l'agression</a></li>	
						</ul>
					</li>
			
					<li><a href=""> Besoins de formation</a>
			
						<ul>
							<li><a href="">&nbsp;Identifier les besoins de formation</a></li>
							<li><a href="">&nbsp;Elaborer un plan de formation</a></li>
							<li><a href="">&nbsp;Evaluer les résultats d'une formation</a></li>	
						</ul>
			
			
			
			
			
					</li>
			
			
			
					<li><a href="">Coaching</a>
						<ul>
							<li><a href="">&nbsp;Auto-coaching</a></li>
							<li><a href="">&nbsp;Coaching individuel </a></li>	
						</ul>
					</li>
			
				
					
				</ul>
		
		
		
			</li>
		
		
			</ul>
			<ul>

					<li><br/><a href="">Développement au sein du groupe</a>
						<ul>
							<li><a href="">Interaction avec les autres</a>
								
								<ul>
									<li><a href="">&nbsp;autorité, diriger, leadership</a></li>
									<li><a href="">&nbsp;écoute</a></li>
									<li><a href="">&nbsp;assertivité, affirmation de soi</a></li>
									<li><a href="">&nbsp;intelligence émotionnelle</a></li>
									<li><a href="">&nbsp;empathie</a></li>
									<li><a href="">&nbsp;motivation, inciter à l'action</a></li>
									<li><a href="">&nbsp;collaboration</a></li>
								</ul>
							</li>
							
							
							<li><a href="">Style de direction d'un groupe</a>
								<ul>
									<li><a href="">&nbsp;délégation </a></li>
									<li><a href="">&nbsp;participative</a></li>
									<li><a href="">empowerment, donner du pouvoir</a></li>
									<li><a href="">&nbsp;  laissez-faire</a></li>
									<li><a href="">&nbsp; recrutement et sélection de collaborateurs</a></li>
									<li><a href="">&nbsp; accueil et intégration de collaborateurs</a></li>
								</ul>
							</li>
			
							<li><a href="">Capacités de négociation, médiation</a>
								<ul>
									<li><a href="">&nbsp;face à face </a></li>
									<li><a href="">&nbsp;en groupe </a></li>
								</ul>
							</li>
		
		
							<li><a href="">Gestion des plaintes, des conflits:</a>
								<ul>
									<li><a href="">&nbsp;de personnes</a></li>
									<li><a href="">&nbsp;de groupes</a></li>
								</ul>
							</li>
		
		
							<li><a href="">Aptitudes à communiquer en groupe</a>
								<ul>
									<li><a href="">&nbsp;Parler en public :</a>
										<ul>
											<li>à un groupe (petit ou grand) </li>
											<li>s’adresser aux médias  </li>
										</ul>
									</li>
									
									<li><a href="">&nbsp;Techniques de présentation : </a>
										<ul>
											<li>emploi des aides audio-visuelles ou autres </li>
											<li>via des techniques d'animation</li>
										</ul>
									</li>
									<li><a href="">&nbsp;Communication via internet : </a>
										<ul>
											<li>orale </li>
											<li>écrite</li>
										</ul>
									<li><a href="">Techniques d'animation de réunions</a></li>
									<li><a href="">Techniques de prise de décision</a></li>
									
									</li>	
								</ul>
							</li>
			
							<li><a href="">Culture d'entreprise gouvernance</a>
										<ul>
											<li><a href="">&nbsp;Management interculturel</a></li>
											<li><a href="">&nbsp;Politique de prévention</a></li>
											<li><a href="">Bien-être des travailleurs</a></li>
											<li><a href="">Politique de sécurité (security) des personnes</a></li>
											<li><a href="">Politique d'environnement</a></li>
										</ul>
	
							</li>
			
			
							<li><a href="">Constitution et motivation d'équipes </a>
										<ul>
											<li><a href="">&nbsp;Référentiel de compétence d'une équipe</a></li>
											<li><a href="">&nbsp;Equipes auto-gérées</a></li>
											<li><a href="">&nbsp;Identification des besoins en formation de l'équipe</a></li>
											<li><a href="">&nbsp;Coaching d'équipe, de groupe, teambuilding</a></li>
											<li><a href="">&nbsp;Créativité en groupe : brainstorming</a></li>
											<li><a href="">&nbsp;Enquêtes d'ambiance, de satisfaction</a></li>
											<li><a href="">&nbsp;Travail à temps partiel</a></li>
											<li><a href="">&nbsp;Télétravail </a></li>
			
			
										</ul>
	
							</li>
		
		
		
							<li><a href="">Gestion de projets </a>
										<ul>
											<li><a href="">&nbsp;Constituer une équipe de projet</a></li>
											<li><a href="">&nbsp;Conduire une équipe de projet</a></li>
											<li><a href="">&nbsp;Participer à une équipe de projet</a></li>	
										</ul>
	
							</li>
			
							<li><a href="">&nbsp;Gestion du changement</a></li>
			    
							<li><a href="">&nbsp;Management de la connaissance</a></li>
			
			
			
						</ul>	
		
		
					</li>
	

			</ul>
			<ul>
					<li><br/><a href="">Développement personnel de carrière</a>
						<ul>
		
							<li><a href="">Techniques de développement de carrière</a>
										<ul>
											<li><a href="">&nbsp;Evaluation de la performance individuelle</a></li>
											<li><a href="">&nbsp;Développement de carrière</a></li>
											<li><a href="">Planning de succession</a></li>
											<li><a href="">Réorientation de carrière, outplacement</a></li>
										</ul>
	
							</li>
		
							<li><a href="">Partenaires pour l'emploi</a>
										<ul>
											<li><a href="">&nbsp;Agences de travail temporaire pour</a>
													<ul>
														<li><a href="">&nbsp; le personnel ouvrier</a></li>
														<li><a href="">&nbsp;le personnel ouvrier qualifié</a></li>
														<li><a href=""> le personnel employé, de cadre et de direction</a></li>
														<li><a href="">les managers intérimaires de direction</a></li>
														<li><a href="">les travailleurs indépendants</a></li>
														<li><a href="">les travailleurs à domicile</a></li>
													</ul>
											</li>
		
		
											<li><a href="">&nbsp;Agences de travail pour C.D.I. </a>
													<ul>
														<li><a href="">&nbsp; le personnel ouvrier</a></li>
														<li><a href="">&nbsp;le personnel ouvrier qualifié</a></li>
														<li><a href=""> le personnel employé</a></li>
														<li><a href="">les employés administratifs </a></li>
														<li><a href="">les employés qualifiés et techniciens</a></li>
														<li><a href="">les travailleurs à domicile</a></li>
													</ul>
											</li>
		
		
		
											<li><a href="">&nbsp;Les employeurs</a></li>
		
		
		
		
		
		
										</ul>
	
							</li>
		
		
		
	
					</li>
</ul>


 </div> <!-- END OF  navigation --> 
			<div id="texte_gauche">	
				
				<a href="#">Link</a>
				colonne de gauche
				</div></div>
				
				
				
				
				
				<div id="col_droite">
				<a href="#">Link</a>
				</div>
				
			</div>
			
<div style="clear: both"><!-- --></div>
		<div id="footer">footer </div>
	</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
GREAT!