[CSS] Problèmes pour formatter un menu sous IE (suckerfish)

Problèmes pour formatter un menu sous IE (suckerfish) [CSS] - HTML/CSS - Programmation

Marsh Posté le 05-05-2005 à 20:40:14    

http://www.jubijub.com/perso/julien/
 
sous FF il marche nickel, sous IE g un déclage (le menu CV est celui avec le dropdown)...
 
Je me suis basé sur le tuto Suckerfish modifié par HTMLDog ...
 
si vous avez une idée de ce qui déconne...
 
je voudrais éviter le décallage, meme si il est pas dramatique


Message édité par Jubijub le 06-05-2005 à 14:02:51

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 05-05-2005 à 20:40:14   

Reply

Marsh Posté le 05-05-2005 à 20:52:18    

Essaie un position: relative sur tes "li"


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-05-2005 à 13:53:30    

==> marche pas
 
j'ai cherché un peu : c le text-align : center qui le fout dedans...
 
je suis reparti du code brut du tuto, en modifiant par étapes et en vérifiant sous IE 6.0 ...
tout va bien jusqu'au text align...pourtant dans mon essai j'ai mis tt les LI de premier niveau (les titres des menus quoi) avec une class first, et j'applique ce truc qu'à la classe...et meme en mettant pour les styles "en dessous" un text-align: left; ca change rien...


Message édité par Jubijub le 06-05-2005 à 14:01:52

---------------
Jubi Photos : Flickr - 500px
Reply

Marsh Posté le 06-05-2005 à 13:54:16    

edit :  
 
j'ai trouvé : il suffit de mettre le style sur le <a> ... ct plutot évident en plus :/
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  3. <html>
  5. <head>
  6. <title>Suckerfish Dropdowns - One Level Bones</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  8. <style type="text/css">
  10. body {
  11. font-family: arial, helvetica, serif;
  12. }
  14. #nav, #nav ul { /* all lists */
  15. padding: 0;
  16. margin: 0;
  17. list-style: none;
  18. line-height: 1;
  19. }
  21. #nav a {
  22. display: block;
  23. width: 250px;
  24.    
  25. }
  27. .first {
  28.     background-color: #80E3F3;
  29. }
  30. a.first {
  31.     text-align: center;
  32. }
  34. #nav li { /* all list items */
  35. float: left;
  36. width: 250px; /* width needed or else Opera goes nuts */
  37. }
  39. #nav li ul { /* second-level lists */
  40. position: absolute;
  41. background: orange;
  42. width: 250px;
  43. left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
  44. }
  46. #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
  47. left: auto;
  48. }
  50. #content {
  51. clear: left;
  52. color: #589BA6;
  53. }
  55. #conteneur {
  56.     position: absolute;
  57.     width: 750px;
  58.     left: 50%;
  59.     margin-left: -375px;
  60.     background-color: #F2F2F2;
  61.     }
  62.    
  64. </style>
  66. <script type="text/javascript"><!--//--><![CDATA[//><!--
  68. sfHover = function() {
  69. var sfEls = document.getElementById("nav" ).getElementsByTagName("LI" );
  70. for (var i=0; i<sfEls.length; i++) {
  71.  sfEls[i].onmouseover=function() {
  72.   this.className+=" sfhover";
  73.  }
  74.  sfEls[i].onmouseout=function() {
  75.   this.className=this.className.replace(new RegExp(" sfhover\\b" ), "" );
  76.  }
  77. }
  78. }
  79. if (window.attachEvent) window.attachEvent("onload", sfHover);
  81. //--><!]]></script>
  84. </head>
  86. <body>
  87. <div id="conteneur">
  88. <h1>PERCIFORMES! (1)</h1>
  89. <p>Welcome to the world of Perciformes - perch-like fish including the world famous <strong>Suckerfish</strong></p>
  91. <ul id="nav">
  93. <li class="first"><a class="first" href="#">Percoidei</a>
  94.  <ul>
  95.   <li><a href="#">Remoras</a></li>
  97.   <li><a href="#">Tilefishes</a></li>
  98.   <li><a href="#">Bluefishes</a></li>
  99.   <li><a href="#">Tigerfishes</a></li>
  101.  </ul>
  102. </li>
  104. <li class="first"><a class="first" href="#">Anabantoidei</a>
  106.  <ul>
  107.   <li><a href="#">Climbing perches</a></li>
  108.   <li><a href="#">Labyrinthfishes</a></li>
  109.   <li><a href="#">Kissing gouramis</a></li>
  110.   <li><a href="#">Pike-heads</a></li>
  111.   <li><a href="#">Giant gouramis</a></li>
  113.  </ul>
  114. </li>
  116. <li class="first"><a class="first" href="#">Gobioidei</a>
  117.  <ul>
  118.   <li><a href="#">Burrowing gobies</a></li>
  119.   <li><a href="#">Dartfishes</a></li>
  121.   <li><a href="#">Eellike gobies</a></li>
  122.   <li><a href="#">Gobies</a></li>
  123.   <li><a href="#">Loach gobies</a></li>
  124.   <li><a href="#">Odontobutidae</a></li>
  125.   <li><a href="#">Sandfishes</a></li>
  126.   <li><a href="#">Schindleriidae</a></li>
  128.   <li><a href="#">Sleepers</a></li>
  129.   <li><a href="#">Xenisthmidae</a></li>
  130.  </ul>
  131. </li>
  133. </ul>
  135. <div id="content">
  136. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
  138. <p><a href="/articles/suckerfish/dropdowns/">Suckerfish Dropdowns</a> by <a href="/ptg/">Patrick Griffiths</a> and <a href="http://www.danwebb.net">Dan Webb</a>.</p>
  139. </div>
  140. </div>
  142. </body>
  144. </html>


Message édité par Jubijub le 06-05-2005 à 14:17:01

---------------
Jubi Photos : Flickr - 500px
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed