[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 293
  • Last Modified:

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
0
jerrrrry
Asked:
jerrrrry
1 Solution
 
mreuringCommented:
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?
0
 
remorinaCommented:
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
0
 
jerrrrryAuthor Commented:
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

0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
jerrrrryAuthor Commented:
0
 
David S.Commented:
This may have been the worst case of IE7's sticky hover bug (http://css-class.com/articles/explorer/sticky/) that I've seen. I seem to have managed to get it working.
#navigation {
  width: 188px;
  font-size: 16px;
  font-family: Helvetica,Verdana,Arial,sans-serif;
}
#navigation ul {
  margin: 0;
  padding: 0;
  background-color: #666;
}

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

#navigation ul ul {
  position: absolute;
  left: -9999px;
  top: 0;
  border: #fff solid 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(fleche2.gif);
  background-repeat: no-repeat;
  background-position: 0 5px;
  color: #FFF;
  border-top: #fff solid 1px;
  border-bottom: #fff solid 1px;
  cursor: pointer;
  position: relative;
  padding-left: 14px;
  padding-left: 10px;
}

#navigation ul li:hover {
  background-color: #F90;
  background-image: url(list.gif);
}

#navigation ul li:hover ul {
  height: auto; /* IE7 fix */
  left: 188px;
}

#navigation ul ul li {
  font-size: 16px;
  height: 45px;
  width: 188px;
  float: left;
  padding-left: 25px;
  display: inline;
}
#navigation ul ul li:hover { background-image: url(list.gif);}

#navigation li:hover ul li ul { left: -9999px;}
#navigation ul ul li:hover ul {
  display: block; /* IE7 fix */
  z-index: 5;
  left: 210px;
}

#navigation li:hover ul ul li ul { left: -9999px;}
#navigation ul li ul ul li:hover ul {
  visibility: inherit; /* IE7 fix */
  left: 210px;
  z-index: 5;
}

Open in new window

0
 
jerrrrryAuthor Commented:
GREAT!
0
 
jerrrrryAuthor Commented:
i still need help with this menu
please have a look at http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_25840025.html

thanks
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now