28172 sujets

CSS et mise en forme, CSS3

[RÉSOLU] Décalage li en escalier dans IE6!

Bonjour Smiley smile

Dans mon menu du haut, les li se décalent en escalier dans IE6. J'ai réglé le problème dans IE7 qui faisait la même chose.

Merci.

Lien:
http://demo.suitevox.com/pciperraultconseil/test/index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="css/navs.css" rel="stylesheet" type="text/css">
<link href="css/all.css" rel="stylesheet" type="text/css">
<link href="css/fonts.css" rel="stylesheet" type="text/css">
<!--[if IE 6]><link href="css/ie6.css" rel="stylesheet" type="text/css"><![endif]-->
<!--[if IE 7]><link href="css/ie7.css" rel="stylesheet" type="text/css"><![endif]-->
</head>

<body>
<div id="container1">
	<div id="container2">
  <p><img src="img/logo.gif" width="282" height="102" alt=""></p>
	</div>
  <div id="container3">
    <div id="header">
      <ul id="sub">
        <li id="current"><a href="#">ACCUEIL</a></li>
        <li><a href="#">&Agrave; PROPOS DE PCI</a></li>
        <li><a href="#">EXPERTISE</a></li>
        <li><a href="#">ACTIVIT&Eacute;S / ACTUALIT&Eacute;S</a></li>
        <li><a href="#">LIENS UTILES</a></li>
        <li><a href="#">NOUS JOINDRE</a></li>
      </ul>
    </div>
  </div>
<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>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
</body>
</html>



/* navs */

/*   === sub menus vertical 1 sprite liens textes ================ */
ul#sub{margin:0; padding:0; list-style:none; font-weight:bold; with:688px; background:url(../img/bg-nav-sub.gif) repeat-x; height:74px; color:#dadada;  font-weight: normal; font-style: normal; line-height:normal; font: 12px 'CorporateCondensedLight', sans-serif; font-size-adjust: 0.56;}
ul#sub li{margin:0; padding:0;}
ul#sub a{float:left; width:auto; background: url(../img/navs-02.gif) right 0 no-repeat;  height:44px; padding: 30px 21px 0 20px; text-align:center; border-right:#333333 1px solid; color:#dadada;}
ul#sub a:hover, ul#sub #current a{width:auto; background: url(../img/navs-02.gif)  right -74px no-repeat;  height:44px; padding: 30px 21px 0 20px; text-align:center; color:#ffbe3b;}


/* all */

*{margin:0; padding:0}
body{margin:0; padding:0; background:#333333 url(../img/bg-body.gif) repeat-x; text-align:justify;}
a img{border:0; outline:none;}
a{ text-decoration:none;}
ul{margin-left:45px; padding:15px 30px;}
li{padding:5px 25px 5px 15px; text-align:left; }

#container1{margin:0 auto; width:970px; background:url(../img/bg-main-01.gif) repeat-y; overflow:hidden;}
#container2{float:left; width:282px;}
#container3{float:right;}
#container3, #header{width:688px;}
#header{float:left; height:229px}


/* ie6 */

ul#sub a, ul#sub li, ul#sub a:hover, ul#sub #current a{display:inline;}

Modifié par webberte (21 Oct 2010 - 20:34)
Salut,

C'est con à dire mais habituellement si ça marche pas dans IE6, c'est qu'à la base le CSS n'est pas cohérent. Certains manque de cohérence sont mieux interprété dans certains navigateurs que d'autres mais il y a quand même une faille.

Dans ton cas, c'est essentiellement l'élément parent qui ne contient pas ton float. Voici une explication : http://gtwebdev.com/workshop/floats/enclosing-floats.php

Je t'ai fait un exemple simple avec deux façons de faire, tout aussi valide dans IE6 et sans "hack".


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Untitled Document</title> 
<style>
	* { margin:0; padding:0; }
	.facon1 ul#sub { overflow:hidden; list-style-type:none; }
	.facon1 ul#sub li { float:left; }
	.facon1 ul#sub li a { float:left; display:block; width:auto; text-align:center; height:74px; line-height:74px; padding:0 20px; background:url(http://demo.suitevox.com/pciperraultconseil/test/img/navs-02.gif) no-repeat top right; }
	.facon1 ul#sub li a:hover { background-position:bottom right; }
	
	</style>
</head> 
 
<body class="facon1"> 
      <ul id="sub"> 
        <li id="current"><a href="#">ACCUEIL</a></li> 
        <li><a href="#">&Agrave; PROPOS DE PCI</a></li> 
        <li><a href="#">EXPERTISE</a></li> 
        <li><a href="#">ACTIVIT&Eacute;S / ACTUALIT&Eacute;S</a></li> 
        <li><a href="#">LIENS UTILES</a></li> 
        <li><a href="#">NOUS JOINDRE</a></li> 
      </ul> 
</body> 
</html>
Sujet clos
Aller à