28172 sujets

CSS et mise en forme, CSS3

Menu déroulant qui ne fontionne pas avec IE7 et 8.

Bonjour,

Un menu horizontal avec sous menu en css qui ne fonctionne pas avec IE 7 et 8.
Le sou menu est sous « menu2 ».
Tout le code est sur le même page.
Fonctionne très bien avec Firefox, Chrome et Safari.


<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
	
	background-color: #7C0406;
}
 
.menu {
		font-family: Verdana, Arial, Helvetica, sans-serif; 
		width:780px; 
		height:32px; 
		position:relative; 
		font-size:12px; 
		z-index:100;
}
 
.menu ul li a  {
		display:block; 
		text-decoration:none; 
		width:95px; 
		height:28px; 
		color:white; 
		border:0px; 
		line-height:32px; 
		font-size:12px; 
		overflow:hidden;
}
 
.menu ul {
		color:#ffcc33;
		padding:0; 
		margin:0; 
		list-style:none;
}
.menu ul li {
		float:left; 
		position:relative;
}
.menu ul li ul {
		display:none;
}
 
.menu ul li:hover a {
		color:#ffcc33; 
		font-size:12px;
}
.menu ul li:hover ul {				
		display:block;
		margin:0; 
		padding:0;  
		position:absolute;		
		top:24px; 
		left:0;
}
 
.menu ul li:hover ul li a {
		display:block;
		background:#ffdf80; 
		color:#000000; 
		width:120px;
}
.menu ul li:hover ul li a:hover { 
		background:#ffcc33; 
		color:#000000;
}
.menu ul li:hover ul li:hover ul {
		display:block; 
		position:absolute; 
		left:105px; 
		top:0;
}
 
-->
</style>
</head>
<body>
<div class="menu">
  <ul>
    <li>
      <div align="center"><a href="#">menu1</a></div>
    </li>
    <li>
      <div align="center"><a href="#">menu2</a>
        <ul>
          <li><a href="#">sous menu1</a></li>
          <li><a href="#">sous menu2</a></li>
          <li><a href="#">sous menu3</a></li>
          <li><a href="#">sous menu4</a></li>
        </ul>
      </div>
    </li>
    <li>
      <div align="center"><a href="#">menu3</a></div>
    </li>
    <li>
      <div align="center"><a href="#">menu4</a> </div>
    </li>
    <li>
      <div align="center"><a href="#">menu5</a></div>
    </li>
    <li>
      <div align="center"><a href="#">menu6</a></div>
    </li>
    <li>
      <div align="center"><a href="#">menu7</a></div>
    </li>
    <li>
      <div align="center"><a href="#">menu8</a></div>
    </li>
  </ul>
</div>
</body>
</html>


Si vous avez une idée.
Merci d’avance.
A +,
Cireultra Smiley decu Smiley decu
Bonjour,

Pas de Doctype?
Des attributs align?

Nous revoilà en 1999. Smiley smile

Une petite lecture à tout hasard:
http://www.alsacreations.com/article/lire/573-A-propos-du-Modele-de-boite-Microsoft-ou-quirks.html
http://www.alsacreations.com/article/lire/560-DTD-comment-choisir.html

PS: encadrer les styles CSS dans un commentaire HTML devrait être tout à fait inutile aujourd'hui. Là aussi, c'était utile... en 1999. Smiley cligne
(Bon ok, ça l'était peut-être encore en 2001 pour certains déjà vieux navigateurs.)
Modifié par Florent V. (09 May 2009 - 17:47)
ça n'a pourtant pas l'air mal ... aurais tu une page en ligne ... ?

edit : Oupss ... ! j'avais pas vu ... Smiley cligne
Modifié par Nours312 (09 May 2009 - 17:50)
Merci pour les réponses,

Bon pour le Doctype OK ça marche avec <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">.
Mais le problème c'est que dans la page complète il y a aussi un scroll avec des images (css+javascript) et lui avec le doctype il ne s'affiche plus.

Je vais chercher du coté du scroll.

A +,

Cireultra
cireultra a écrit :
Mais le problème c'est que dans la page complète il y a aussi un scroll avec des images (css+javascript) et lui avec le doctype il ne s'affiche plus.

Il faut travailler en mode Standard, et pas en mode Quirks. À retenir pour le prochain projet. Pour celui-ci... eh bien à moins que ça ne soit bouclé à 99%, tu n'as plus qu'à prendre ton courage à deux mains et corriger les problèmes éventuels rencontrés à cause d'un code fonctionnant mal en mode Standard.
Sujet clos
Aller à