28173 sujets

CSS et mise en forme, CSS3

Bugs IE dans une page avec un menu deroulant

Bonjour,
Je désire réaliser un menu déroulant avec CSS dans la colonne gauche. Ma page s'affiche convenablement sous FireFox et Opéra. Mais sur IE, le menu déroulant ne s'affiche pas.
J'ai utilisé un peu du Javascript que j'ai lié dans le fichier html:

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace»
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
Voici le fichier CSS:
html { margin: 0px; } 

h1 { 
	color: #535769;
	font: bold 1.1em Arial, Verdana, Helvetica, sans-serif;	
	text-align: center;}
p  {    padding: 0px;}


/* #colprincipale h1 {border-top-color: #15477A;} */

h2 { 
	color: #535769;
	font: bold 1.4em Arial, Verdana, Helvetica, sans-serif;	
}
body { 
	 background: #8FA9C3;
	/* background-image: url('images/arriereplan.gif'); */
 	text-align: center; 
 	font: 0.7em Verdana, Arial, Helvetica, sans-serif; 
 	margin: 0px; 
	padding: 0px;
	
}
#page, #page3col { 
	margin: 0px auto;  /* Pour centrer la page dans Mozilla */ 
 	background: url('images/bkpage_2col2.gif') repeat-y; 
 	text-align: left; 
 	width: 749px;    /* La largeur doit être la même que l'image d'arrière plan */ 
	padding: 0px 17px 0px 17px; 
	/* Hack */ 
	voice-family: "\"}\""; 
	voice-family:inherit; 
	width: 715px; 
} 
	html>body #page, html>body #page3col { width: 715px; }
#page3col {
	background: url('images/bkpage_3col1.gif') repeat-y;
}

#entete 	{  height: 80px; 
		   background: #CBD1D4; 
	}
 #logo img 	{ float: left;   
		  width: 168px;
		  padding:0px	} 
 #banniere img   { float: left;
		   width: 547px;
		   padding:0px; }
 
#menuh { 
	background: url('images/menuhoribk.gif') #5781AE repeat-x; 
	border-top: solid 1px #293F6F; 
 	border-bottom: solid 1px #293F6F; 
	padding: 5px; 
	color: #46719C; 
	font: bold 1.1em Verdana, Arial, Helvetica, sans-serif; 

}
#menuh ul { 
 	list-style: none;  /* supprime la marque de liste */ 
	padding: 0px;    /* supprime l'indentation gauche */ 
 	margin: 0px; 
} 

#menuh ul li { 
 	display: inline;  /* affiche les éléments de la liste en ligne */ 
 	padding-left: 10px;  /* Espace entre les éléments de la liste */ 
} 

#menuh a:link, #menuh a:visited { 
 	color: #fff; 
 	text-decoration: none; 
} 

#menuh a:active, #menuh a:hover { 
 	color: #051E37; 
 	text-decoration: none; 
}

dl, dt, dd {
margin: 0;
padding: 0;
list-style-type: none;
}

dl#menu {
width: 12em;
text-align: center;
}
dl#menu dt {
cursor: pointer;
margin: 2px 0px;
height: 20px;
line-height: 20px;
text-align: left;
font-weight: bold;
border: 1px solid gray;
background: #ccc;
}
dl#menu dd {
border: 1px solid gray; /* text-align: left; */
}
dl#menu li {
text-align: left;
background: #fff;
}
dl#menu li a, dl#menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}

dl#menu li a:hover, dl#menu dt a:hover {
background: #eee;
}

#colgauche { 
	width: 168px; 
	float: left;
	/* background: url('') no-repeat; L'image en instance d'être choisie */ 
 	padding: 10px 8px 8px 10px; 
 	/* box model hack */ 
 	voice-family: "\"}\""; 
 	voice-family:inherit; 
 	width: 152px;  
} 
html>body #colgauche { width: 152px; } 

#colprincipale { 
 	width: 545px; 
 	float: left; 
	 padding: 10px; 
 	/* Elemination du bogues IE */ 
	voice-family: "\"}\""; 
 	voice-family:inherit; 
 	width: 525px; 

}
html>body #colprincipale { width: 525px; }
#colcentre {			
	width: 395px;
	float: left;
	padding: 10px;
	/* Contre le bogue de IE */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 375px;
}
	html>body #colcentre { width: 375px; }
/* #colcentre p:first-letter {font-size:large;} */

img {border:0px;}
#imagesiege {float:left;}

.element{
	margin:0px 5px 0px 5px; 
	padding:5px; 
	font: bold 1.1em Arial, Verdana, Helvetica, sans-serif;	
	color:#535769;
	border-left:4px solid #678BAD;
	border-right:1px solid #888888;
	border-top:1px solid #888888;
	border-bottom:1px solid #888888;}

.element p:first-letter {font-size:large;}
.element p {margin-left:5px;}
.element img {margin-top:10px; }
#servicecontenu {margin:0px 0px 0px 0px; }
.servicedetail {
	border:1px solid #888888; 
	margin:10px 15px 10px 10px;
	padding:0px;}

.servicedetailgauche {
	float:left;
	width:210px;
	height:280px;
	text-align:center;}

.servicedetaildroite {
	margin-left:10px;
	height:280px;
	padding:10px 10px 10px 10px; 
	color:#666666;
	background-color:#efefef;
	font-size:small;}

#coldroite {
	background: url('images/arc_haut_mnu_drt1.gif') no-repeat;
	width: 165px;
	float: left;
	padding: 10px;
	/* box model hack */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 130px;
}
	html>body #coldroite { width: 130px; }
#colgauche ul 
	{ 
 	list-style: none; 
	padding: 0px; 
 	margin: 0px; 
	width: 150px;
	border-bottom: 1px solid #ccc;
	} 
#colgauche  ul li {
	position: relative;
	}
#colgauche a:link, #colgauche a:visited, #colgauche a:hover { 
 	display: block; 
 	font: bold 1.1em Verdana, Arial, Helvetica, sans-serif; 
 	color: #1A286E; 
 	text-decoration: none; 
	padding: 5px; 
 	width: 153px; 
	height: 26px; 
 	/* Elemination du bogue IE */ 
 	voice-family: "\"}\""; 
 	voice-family:inherit; 
	width: 143px; 
	height: 16px; 
} 
#colgauche a:hover { 
 	display: block; 
 	font: bold 1.1em Verdana, Arial, Helvetica, sans-serif; 
 	color: #fff; 
 	text-decoration: none; 
	padding: 5px; 
 	width: 153px; 
	height: 26px; 
 	/* Elemination du bogue IE */ 
 	voice-family: "\"}\""; 
 	voice-family:inherit; 
	width: 143px; 
	height: 16px; 
} 
html>body #colgauche a:link, html>body #colgauche a:visited, html>body #colgauche a:hover { 
 	width: 143px; 
 	height: 16px; 
}
#colgauche  li ul {
	position: absolute;
	left: 149px;
	top: 0px;
	display: none;
	}
#colgauche  ul li a {
	display: block;
	text-decoration: none;
	color: #ffffff;
	background: #CBD1D4;
	padding: 5px;
	border: 0px;  /* 1px solid #000000;  */
	border-bottom: 0;
	}
/* Fixer les elements dans IE. Cache les elements de IE Mac \*/
* html colgauche ul li { float: left; height: 1%;  }
* html colgauche ul li a { height: 1%; }

#colgauche li:hover ul, #colgauche li.over ul  { display: block; }

 #coldroite {   float:left;
		background: url('images/arc_haut_mnu_droit2.gif') no-repeat;
		padding: 10px 0px 0px 0px; /* la hauteur de l'image d'arriere plan du haut de la colonne droite  */
		margin: 0px auto;
		width: 146px;	
	    } 
#coldroite img { margin:0px;
		 padding:0px}
#colbasse { 
 	margin: 0px auto; /* Pour centrer le pied de page dans Mozilla */ 
 	background: url('images/bk_bas2_avant.gif') no-repeat; 
 	width: 749px;    /*  La largeur doit être la même que l'image d'arrière plan */
	color:  #FFFFFF; 
	/* padding: 10px 0px 10px 0px;  Pas besoin de hack modele car l'espacement est appliqué en haut en en bas, non aux cotés */
 
}
#pied { 
 	margin: 0px auto;  /* Pour centrer le pied de page dans Mozilla */ 
 	background: url('images/bk_bas1.gif') no-repeat; 
 	width: 749px;    /*  La largeur doit être la même que l'image d'arrière plan */
	color:  #FFFFFF; 
	padding: 10px 0px 10px 0px; /* Pas besoin de hack modele car l'espacement est appliqué en haut en en bas, non aux cotés */
 
}
.clear { clear: both; }
[/i]

Quelle alternative pour le bogue IE?
Modifié par Kakale (10 Apr 2007 - 09:41)
Salut,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif
Sujet clos
Aller à