28172 sujets

CSS et mise en forme, CSS3

Menu fonctionne très bien...sauf sur IE !

Bonjour,

Mon menu ne fonctionne pas correctement sous IE et notemment la version 8 (online). Le sous menu ne se déroule pas, et à la place on voit apparaître le scroll horizontal en bas avec le sous menu qui se déroule tout à droite.

Je précise que cela fonctionne très bien en local sous IE 8 !
Cela fonctionne également très bien online avec les dernières versions de Firefox, Safari, Opera et Google Chrome.

J'ai du mal à comprendre. Mais je sais que les soucis avec des CSS sous IE sont assez courants !

Voici le code html : 

<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Bienvenue sur le site d'Antoine</title>
<link href="style2.css" rel="stylesheet"  type="text/css" />
<style type="text/css">
<!--
.style3 {
	font-size: 14pt;
	text-decoration: underline;
}
.style4 {font-size: 12pt}
.style5 {font-size: 18pt;
	color: #FFFFFF;}
-->
</style>
</head>
 
<body>
<div align="center">
  <table width="920" border="0" cellpadding="0" cellspacing="0" id="table1">
    
    <tr>
      <td colspan="2"><table width="920" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td><img src="logo.jpg" width="920" height="105" border="0" style="float:left;" />
           <div id="menu">
              <ul>
                <li><a href="index.html">Accueil</a></li>   
                <li><a href="rub1.html">rub1</a></li>                                       	                    
                <li><a href="rub2.html">rub2</a></li>
                <li><a href="rub3.html">rub3</a></li>                		
                <li class="top ">rub4
                  <ul>
                    <li><a href="ssrub1.html">ssrub1</a></li>
                    <li><a href="ssrub2.html">ssrub2</a></li>
                    </ul>
                  </li>
                <li><a href="rub5.html">rub5</a></li>  
                <li><a href="rub6.html">rub6</a></li>  
                <li><a href="contact.html">Contact</a></li>
                </ul>
              </div>
          </td>
        </tr>
      </table></td>
    </tr>
    <tr>
      <td align="left"><div id="col2">
        <h1>Accueil</h1>
        <p><br />
          [En construction].</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
      </div>
        <p class="style4"><br />
        </p>
        <p class="style4">&nbsp;</p>
        <p class="style4">&nbsp;</p>
      <!-- END COL2--></td>
    </tr>
    <tr>
      <td><div id="footer">
          <p align="center">&nbsp;</p>
        </div></td>
    </tr>
  </table>
</div>
 
</body>
</html>


Et le code CSS : 

html {overflow-y: scroll;}
 
*{
	margin:0px;
	padding:0px;
	font-size: 10pt;
	padding-left: 0px;
}
 
 
h1
{
font-family:verdana;
font-size:1.9em; 
font-weight: normal;
color:#333333;
padding-left:5px;
line-height:1.6em
}
	
p
{
	font-family:Verdana;
	font-size:12pt;
	font-weight: normal;
	color:#FFFFFF;
	text-align: left;
 
}
 
a
{
color:#777777;
font-size:0.9em; 
font-weight:normal;
font-style:normal;
text-decoration:underline;
}
 
 
a:link
{
color:#FFFFFF;
font-weight:normal;
font-style:normal;
text-decoration:underline;
}
 
 
a:visited
{
color:#FFFFFF;
font-style:normal;
font-weight:normal;
text-decoration:underline;
}
 
 
a:hover
{
color: #F1A22B;
font-style:normal;
text-decoration:none;
}
 
#logo {
	width: 780px;
	margin: 0 auto;
	padding: 20px 0 0 0;
	border: 2px solid #000000;
	border-bottom: 2px solid #000000;;
}
 
#logo h1 {
	text-align: center;
	font-size: 4em;
}
 
#logo h2 {
	text-align: left;
	font-size: 1.8em;
}
 
#logo a {
	text-decoration: none;
	color: #666666;
}
 
body
 
{
	font-family:Verdana;
	text-align: center;
	color: #FFFFFF;
	background-color: #000;
	font-size: 12pt;
}
 
#wrapper 
 
{
margin-top:0px;
margin-right: auto;
margin-bottom:0px;
margin-left: auto;
width:850px;
}
 
#nav ul
 
{
list-style:none;
margin-left:340px;
padding-top:0px;
}
 
 
#nav li
 
{
text-align:left;
float:left;
margin-left:2px;
padding-left:0px;
padding-bottom:0px;
}
 
#nav ul li a
 
{
display:block;
color:#666666;
border-top:1px solid #46433e;
border-left:1px solid #46433e;
border-right:1px solid #46433e;
line-height:2.5em;
padding:0 25px 0 25px;
background:transparent;
font-weight:normal;
font-size: 0.76em;
text-decoration: none;
}
 
#nav li a:hover
{
color: #131313;
background-color:#666666;
}
 
#nav ul li .selected
{
color: #131313;
background-color:#666666;
}
 
 
 
#content
 
{
float:left;
margin-left:0px;
margin-right:0px;
width:850px;
background:#000000;
margin-bottom:10px;
}
 
 
#banner
 
{
 
height:288px;
background: url(images/home.jpg) no-repeat ;
margin-top:30px;
margin-left:30px;
margin-right:30px;
text-align:left;
font-size:0.9em;
border:8px solid #ffffff;
}
#banner2
 
{
 
height:288px;
background: url(images/inside.jpg) no-repeat ;
margin-top:30px;
margin-left:30px;
margin-right:30px;
text-align:left;
font-size:0.9em;
border:8px solid #ffffff;
}
 
#banner3
 
{
 
height:288px;
background: url(images/inside2.jpg) no-repeat ;
margin-top:30px;
margin-left:30px;
margin-right:30px;
text-align:left;
font-size:0.9em;
border:8px solid #ffffff;
}
 
 
 
#col1 h1
{
display:block;
font-size:1.6em;
font-family:Helvetica, Arial, sans-serif;
text-align:left;
font-weight:normal;
color:#ffffff;
font-weight:normal;
padding-bottom:0px;
margin-top:5px;
margin-bottom:5px;
margin-left:5px;
}
 
 
 
#col1 p
 
 { 
font: normal 0.9em Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #cccccc;
padding:10px;
text-align:left;
}
 
#col2
 
{
float:left;
margin-left:0px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
margin-top:0px;
background: transparent;
width:910px;
text-align:left;
font-size:0.9em;
}
 
#col2 h1
{
display:block;
font-size:18pt;
font-family:Verdana;
text-align:left;
font-weight:normal;
color:#FFFFFF;
font-weight:normal;
padding-bottom:0px;
margin-top:5px;
margin-bottom:5px;
}
 
#col2 p
 
 { 
font: Verdana;
font-size:12pt;
margin-top:10px;
color: #FFFFFF;
text-align:left;
margin-left:7px;
}
 
#col2 ul
{
list-style-type:none;
margin-top:10px;
}
 
#col2 li 
{
text-align:left;
background:url(images/arrow.gif) no-repeat center left;
margin-top:5px;
margin-left:15px;
padding-left:0px;
padding-bottom:0px;
color:#ffffff;
}
 
#col2 ul li a
{
color:#e1e1e1;
padding-left:20px;
font-weight:normal;
font-size: 0.8em;
text-decoration: underline;
}
 
#col2 ul li a:hover
{
color: #fff;
text-decoration:none;
}
 
 
 
 
#dollar
 
{
float:right;
background:url(images/doller.gif) no-repeat;
width:400px;
height:300px;
margin-right:10px;
margin-top:40px;
padding:0px;
text-align:left;
font-size:0.9em;
}
 
 
#footer 
 
{
	clear:both;
	margin-top:0px;
	background:transparent;
	color:#FFFFFF;
	;
	margin-left:auto;
	margin-right:auto;
	margin-bottom: 0px;
	padding-top:0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	text-align: left;
}
 
#footer p 
 
{
font-size:8pt;
font-family:Verdana;
font-weight:normal;
line-height: 1.4em;
color:#FFFFFF;
padding-top:10px;
padding-bottom:10px;
padding-left:5px;
text-align:center;
margin:auto;
}
 
#footer a 
{
font-size:1em;
text-decration:none;
font-weight:normal;
color:#FFFFFF;
text-align:center;
}
 
#footer a:hover
 
{
text-decoration:none;
font-weight:normal;
color:#F1A22B;
text-align:center;
}
 
#bot {
	width: 780px;
	margin: 0 auto;
	padding: 10px;
	background: #000000;
	border-top: none;
}
 
#bot p {
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: x-small;
	color: #EEEEEE;
}
 
#bot a {
	color: #FFFFFF;
}
 
 
#menu {
	min-height:36px;
	height:auto;
	padding: 0px;
	margin: 0px;
	width: 920px;
}
 
#menu ul {list-style-type: none;}
 
#menu ul li {
	float:left;
	position:relative;
	z-index:0;
	font-size: 10px;
}
#menu ul li a, #menu ul li.top, #menu ul li.active, #menu ul li a.active {
	display:block;
	width:auto;
	text-align:center;
	min-height:30px;
	height:auto;
	font-weight:bold;
	letter-spacing:normal;
	text-decoration:none;
	color:#000;
	background-repeat: repeat;
	background-position: center center;
	margin: 0px;
	padding-top: 12px;
	font-family: Verdana;
	font-size: 13pt;
	padding-left: 10px;
	padding-bottom: 0px;
	background-image: url(images/menu_fond.jpg);
	padding-right: 16px;
}
#menu ul li a:hover, #menu ul li a.active, #menu ul li.active {background-position:-159px bottom;color:white}
#menu ul li.active {
	cursor:default
}
#menu ul li.active h2 {font-size:1em}
/*sous-menu*/
#menu ul li ul {
	position:absolute;
	left:-999em;
	font-size:16pt;
	border:0px solid #D8CFC7;
	font-family: Verdana;
}
#menu li ul li {
	font-family: Verdana;
	position: relative;
	padding-top: 0px;
	padding-right: 20px;
	padding-bottom: 0px;
	padding-left: 72px;
	margin: auto;
}
#menu li ul li a {
	min-height:18px;
	padding-top:5px;
	background-position:left top;
	border-top-width: 0px;
	border-top-style: solid;
	border-top-color: #D8CFC7;
	padding-bottom: 5px;
	font-size: 12pt;
	width: 60px;
	padding-left: 10px;
	height: 1%;
}
#menu li ul li a:hover, #menu li ul li a:hover.active, #menu li ul li.active {
	min-height:18px;
	padding-top:2px;
	background-position:-159px top;
	border-top:1px solid #D8CFC7;
	margin-right:0px;
}
#menu ul li:hover ul, #menu ul li.sfhover ul {top:42px;left:-161px;margin-left:100%}


Merci à vous d'avance.
J'ai modifié pleins de propriétés...position, etc mais rien ne fonctionne...

Quelqu'un a t'il une idée ? Ou une piste sur les soucis de compatibilité des menus CSS avec IE ?

Faut t'il mettre des exceptions pour IE ?

Je vous remercie pour votre aide.
salut

corrige tes css, il y à pas mal d'erreurs. En voilà au moins quatre.

border-bottom: 2px solid #000000;; }
color:#FFFFFF;; margin-left:auto;
text-decration:none;
font: Verdana; font-size:12pt;


en strict, ce n'est pas valide : <div align="center">

quant au tableau... Smiley bawling
Modifié par keran (27 Nov 2009 - 19:12)
Merci pour ces remarques.

J'ai fait les corrections.

Par contre pour les tableaux, ce sera pas pour cette fois...et puis ça a l'avantage de faire une mise en page correcte et rapidement...car en CSS, ça risque d'être beaucoup plus compliqué...

Sinon pour le menu CSS, j'ai partiellement réglé mon problème...ça marche désormais sous IE8 grâce à ça : 

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>


Ca permet de simuler IE8 sous IE8...ne me demandez pas pourquoi je ne sais pas Smiley decu

Peut-être y a t'il une balise dans ce genre qui permettrait de rendre le menu compatible avec les versions précédentes ?

Si vous avez des idées, n'hésitez pas...

Merci.
Sujet clos
Aller à