Hello,
N'ayant pas de solution viable pour régler se problème, je m'en remets à vous.
Une partie du code vient d'ici même (pour le bloc avec flottement vertical), l'autre morceau de code vient de là. Code que j'ai adapter afin de permettre un ajustement horizontal de la première liste, en fonction de la longueur du texte.
Voici le code en question :
le rendu sous IE5.5 est lamentable, surement un chevauchement quelque part. le plus important étant de régler ce décalage sous IE6.
Un grand merci à vous!
N'ayant pas de solution viable pour régler se problème, je m'en remets à vous.
Une partie du code vient d'ici même (pour le bloc avec flottement vertical), l'autre morceau de code vient de là. Code que j'ai adapter afin de permettre un ajustement horizontal de la première liste, en fonction de la longueur du texte.
Voici le code en question :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
</head>
<style type="text/css">
*{padding:0; margin:0;}
/* ON CENTRE LA PAGE D'ACCUEIL */
#accueil {
position:absolute;
left: 50%;
top: 50%;
width: 1000px;
height: 600px;
margin-top: -300px; /* moitié de la hauteur */
margin-left: -500px; /* moitié de la largeur */
border:1px solid #e8e8e8;
background-color:#CCCC00;
}
/* LISTE DEROULANTE + HACKS IE */
.menu {position:relative; width:600px; left:300px; z-index:100; font-family: "Century Gothic", arial, sans-serif; height:35px; background:#FFF; line-height:29px;}
/* hack to correct IE5.5 faulty box model */
* html .menu {}
/* remove all the bullets */
.menu ul {list-style-type:none;}
.menu ul ul {width:100px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {font-size:10px;text-decoration:none; color:#fff; width:138px; height:30px; background:#09c;}
.menu ul ul a{display:block;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:35px;left:0; width:149px;}
/* another hack for IE5.5 */
* html .menu ul ul {top:35px;t\op:35px; padding:0; margin:0;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#000; height:auto; line-height:1em; width:128px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#b7d186;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#b7d186;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible; }
/* Class permettant l'ajustement horizontal du menu selon la longueur du texte */
.first{height:35px;}
.first a{position:relative; padding:10px; line-height:29px;}
.first span{text-transform: uppercase}
</style>
<body>
<div id="accueil">
<div class="menu">
<ul>
<li class="first"><a href="../mozilla/index.html"><span>accueil</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li class="first"><a href="../mozilla/index.html"><span>mon métier</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html">drop down menu</a></li>
<li><a href="../mozilla/cascade.html">cascading menu</a></li>
<li><a href="../mozilla/content.html">content:</a></li>
<li><a href="../mozilla/moxbox.html">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html">I can build a rainbow with transparent borders</a></li>
<li><a href="../mozilla/snooker.html">a snooker cue using border art</a></li>
<li><a href="../mozilla/target.html">target practise</a></li>
<li><a href="../mozilla/splittext.html">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul>
<li class="first"><a href="../mozilla/index.html"><span>consultations individuelles</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../mozilla/dropdown.html">drop down menu</a></li>
<li><a href="../mozilla/cascade.html">cascading menu</a></li>
<li><a href="../mozilla/content.html">content:</a></li>
<li><a href="../mozilla/moxbox.html">mozzie box</a></li>
<li><a href="../mozilla/rainbow.html">I can build a rainbow with transparent borders</a></li>
<li><a href="../mozilla/snooker.html">a snooker cue using border art</a></li>
<li><a href="../mozilla/target.html">target practise</a></li>
<li><a href="../mozilla/splittext.html">two tone headings</a></li>
<li><a href="../mozilla/shadow_text.html">shadow text</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div><!-- menu -->
</div><!-- accueil -->
</body>
</html>le rendu sous IE5.5 est lamentable, surement un chevauchement quelque part. le plus important étant de régler ce décalage sous IE6.
Un grand merci à vous!