1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

CSS Down Hoover Menü im IE geht nicht

Dieses Thema im Forum "CSS" wurde erstellt von PhoenixDH, 25. November 2008.

  1. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Ich bin mit meinem Latein am Ende!
    Hab schon im Netz gesucht, die hover.htc getestet, aber irgendwie funktioniert mein Down Hoover Menü im IE nicht. Alle anderen Browser gehen! Im IE wird das Menü nur als Tree angezeigt.

    Hab hier mal den Quellcode:

    CSS:
    Code (Text):
    1. body {
    2.     background-color: #FFE1BD;
    3.     scrollbar-face-color: #D2B48C;
    4.     scrollbar-highlight-color: #F5DEB3;
    5.     scrollbar-shadow-color: #D2B48C;
    6.     scrollbar-3dlight-color: #FFF8DC;
    7.     scrollbar-arrow-color:  #8B4513;
    8.     scrollbar-track-color: #FFF8DC;
    9.     scrollbar-darkshadow-color: #8B4513;
    10. }
    11.  
    12. .forumline  { background-color: #F5DEB3; border: 2px #8B4513 solid; }
    13.  
    14. ul.cssmenu {
    15.   position: relative;
    16.   display: block;
    17.   margin: 0px;
    18.   padding: 0px;
    19. }
    20. ul.cssmenu ul {
    21.   position: relative;
    22.   display: none;
    23. }
    24. ul.cssmenu li {
    25.   position: relative;
    26.   display: inline;
    27.   float: left;
    28. }
    29. /* Menupunkt stylen */
    30. ul.cssmenu li a {
    31.   font-family: arial, sans-serif;
    32.   font-size: 12px;
    33.   font-weight:bold;
    34.   line-height: 20px;
    35.   text-decoration: none;
    36.   text-align: center;
    37.   display: block;
    38.   width: 100px;
    39.   height: 20px;
    40. }
    41. ul.cssmenu li:hover > a {
    42.   background-color: #8B4513;
    43.   color: #FFFFFF;
    44.   font-weight: bold;
    45. }
    46. /* Untermenüpunkt einblenden */
    47. ul.cssmenu li:hover > ul {
    48.   position: absolute;
    49.   top: 20px;
    50.   left: -40px;
    51.   display: inline;
    52. }
    53. /* ab zweite Ebene */
    54. ul.cssmenu li li:hover > ul {
    55.   top: 0px;
    56.   left: 110px;
    57. }
    58. ul.cssmenu li li a {
    59.   width: 120px;
    60. }
    61. /* Farben der einzelnen Ebenen (werden vererbt)*/
    62. ul.cssmenu a {
    63.   color: #000000;
    64.   background-color: #FFF8DC;
    65. }
    66. ul.cssmenu ul a {
    67.   background-color: #D2B48C;
    68.   border: 1px #8B4513 solid;
    69. }
    70. ul.cssmenu ul ul a{
    71.   background-color: #c4c4c4;
    72. }
    73. ul.cssmenu ul ul ul a{
    74.   background-color: #b4b4b4;
    75. }
    76.  
    77. /* zusätzliche Styleangaben für IE 6 */
    78. /* das Menü wird dort untereinander dargestellt */
    79. ul.cssmenu {
    80.   _text-indent: 10px;
    81. }
    82. ul.cssmenu ul {
    83.   _display: inline;
    84.   _margin-left: 0px;
    85.   _text-indent: 20px;
    86. }
    87. ul.cssmenu ul ul {
    88.   _text-indent: 30px;
    89. }
    90. ul.cssmenu ul ul ul {
    91.   _text-indent: 40px;
    92. }
    93. ul.cssmenu li {
    94.   _float: none;
    95. }
    96. /* Menupunkt stylen */
    97. ul.cssmenu li a {
    98.   _text-align: left;
    99.   _width: 120px;
    100. }
    101. ul.cssmenu a:hover {
    102.   _font-weight: bold;
    103.   _background-color: #8B4513;
    104. }
    HTML:
    Code (Text):
    1. <table>
    2. <tr>
    3. <td class="forumline">
    4.  
    5. <link rel="stylesheet" href="css.css" type="text/css">
    6.  
    7.  
    8. <ul class="cssmenu">
    9.   <li><a href="http://XYT.de/">Forum</a></li>
    10.   <li><a href="http://XYT.de/">Listen</a>
    11.     <ul>
    12.       <li><a href="http://XYT.de/">Mitglieder-Liste</a>
    13.       <li><a href="http://XYT.de/">Nickpage-Liste</a>
    14.       <li><a href="http://XYT.de/">Statistik</a></li>
    15.       <li><a href="http://XYT.de/">Benutzergruppen</a></li>
    16.     </ul>
    17.   </li>
    18.   <li><a href="http://XYT.de/">Kleinanzeiger</a>
    19.     <ul>
    20.       <li><a href="http://XYT.de/">Anzeigen</a></li>
    21.       <li><a href="http://XYT.de/">Anzeige suchen</a></li>
    22.     </ul>
    23.   </li>
    24.   <li><a href="http://XYT.de/">Info</a>
    25.     <ul>
    26.       <li><a href="http://XYT.de/">Kalender</a></li>
    27.       <li><a href="http://XYT.de/">Lexikon</a></li>
    28.       <li><a href="http://XYT.de/">Sitemap</a></li>
    29.     </ul>
    30.   </li>
    31.   <li><a href="http://XYT.de/">Fun</a>
    32.     <ul>
    33.       <li><a href="http://XYT.de/">Bildergalerie</a></li>
    34.       <li><a href="http://XYT.de/">Arcade Spiele</a></li>
    35.       <li><a href="http://XYT.de/">User-Karte</a></li>
    36.     </ul>
    37.   </li>
    38.   <li><a href="http://XYT.de/">Suche</a></li>
    39.   <li><a href="http://XYT.de/">FAQ</a></li>
    40.   <li><a href="http://XYT.de/">Login</a></li>
    41.   <li><a href="http://XYT.de/">Registrieren</a></li>
    42. </ul>
    43.  
    44. </td>
    45. </tr>
    46. </table>
    In der CSS sollte jedoch der IE schon abgefangen werden, was aber auch nicht klappt!

    Hoffe ihr könnt mir helfen! Dank euch!
     
  2. Maik

    Maik Gast

  3. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Suckerfish hab ich auch schonmal gehört!
    Aber geht es nicht das man das obere ein bisschen anpasst, denn das hätte ich jetzt dirtekt fertig mit all den Farben.
     
  4. Maik

    Maik Gast

    Zur "Anpassung" wird für den IE6 etwas Javascript-Code benötigt, da er den Selektor "li:hover > ul" zum Einblenden der Submenüs nicht unterstützt.

    Oder du schaust dir alternativ Stu Nicholls' Dropdown-Menüs (Kategorie "Menus - Multi-Level - Dropdown") an, die kein JS enthalten, wo du aber neben dem Stylesheet auch den HTML-Code "anpassen" (= erweitern) müsstest.

    Da wäre dann die "Suckerfish"-Variante mit dem geringsten Aufwand verbunden, da lediglich das oberste ul-Element mit der ID #nav ausgezeichnet, und eben der JS-Code hinzugefügt werden muß.

    mfg Maik
     
  5. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Das komische ist, ich habe gerade wieder die Seite gefunden wo ich das Script her habe!

    Wenn ich die original Seite im IE aufrufe geht das Bsp. Menü, aber wenn ich den Code zusammenkopiere geht es nicht mehr, hier mal der Link, vielleicht ist das ein Ansatz mir zu helfen, danke!

    Klick
     
  6. Maik

    Maik Gast

    Bei mir funktioniert das horizontale Dropdown-Menü auf der Beispielseite im IE6 keinesfalls und wird von ihm auch total verkehrt dargestellt:

    ie6.jpg

    Lediglich im IE7 wird es so dargestellt, wie in den übrigen modernen Browsern, und funktioniert in ihm gleichermaßen, da er den von mir heute Morgen angesprochenen Selektor interpretiert, und somit in ihm auch keine "Hacks" benötigt werden.

    Stellt sich die Frage, von welcher IE-Version du hier eigentlich sprichst?

    mfg Maik
     
  7. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Hab nochmal getestet!
    Hab hier den IE 7, da gehts net, im IE6 auch nicht!

    Das komische ist, es ist nur der zusammenkopierte Code der nicht geht im IE7, die normale Webseite wird bei mir auch richtig angezeigt.

    Was muss ich also machen?
    Kann das bitte nochmal jemand so erklären das ich das auch verstehe, bin in CSS Laie!

    Danke!"
     
    Zuletzt bearbeitet: 27. November 2008
  8. Maik

    Maik Gast

    Moin,

    lies dir doch bitte einfach mal den empfohlenen Artikel Suckerfish Dropdowns durch, und schau dir den Quellcode des Beispiels Suckerfish Dropdowns - One Level Bones näher an.

    Darin findest du alle benötigten Infos, um ein Dropdown zu erzeugen, das ebenfalls im IE6 funktioniert.

    Im Notfall einfach die Vorlage des Beispiels kopieren, und sie anschliessend auf deine Vorstellungen (Größe,Farben,usw.) anpassen.

    mfg Maik
     
  9. Maik

    Maik Gast

    Dann hast du den Doctype

    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    aus der Beispielseite nicht übernommen, bzw. übergibst deine Seite den Browsern im "Quirksmode", denn im standardkonformen Modus funktioniert das Menü im IE7 einwandfrei:

    ie7.jpg

    mfg Maik
     
  10. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Achso, ok!

    Also ich habe jetzt nach langem testen und überlegen doch gewechselt und bin auf das Suckerfish umgestiegen.

    Habe dort auch meinen Style eingebunden.

    Das einzigste was er im IE6 nicht macht, ist die Hoover Funktionen wenn man auf den ersten Punkt geht wie z.B. Info.

    Wenn du mir da nochmal zur Hand gehen würdest wäre ich dir sehr dankbar.
    Hier der aktuelle Code:
    Code (Text):
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2.     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html>
    4.  
    5. <head>
    6. <title>Suckerfish Dropdowns - One Level Bones</title>
    7.  
    8. <style type="text/css">
    9.  
    10. body {
    11.     font-family: arial, helvetica, serif;
    12.     background-color: #FFE1BD;
    13. }
    14.  
    15. .forumline  { background-color: #F5DEB3; border: 2px #8B4513 solid; }
    16.  
    17. #nav, #nav ul { /* all lists */
    18.     padding: 0;
    19.     margin: 0;
    20.     list-style: none;
    21.     line-height: 20px;
    22. }
    23.  
    24. #nav a {
    25.     display: block;
    26.     text-decoration: none;
    27.     font-family: arial, sans-serif;
    28.     font-size: 12px;
    29.     font-weight:bold;
    30.     color: black;
    31. }
    32.  
    33. #nav li { /* all list items */
    34.     float: left;
    35.     width: 90px; /* width needed or else Opera goes nuts */
    36.     height: 20px;
    37.     background-color: #FFF8DC;
    38. }
    39.  
    40. #nav li ul { /* second-level lists */
    41.     position: absolute;
    42.     width: 120px;
    43.     left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
    44. }
    45.  
    46. #nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    47.     left: auto;
    48. }
    49.  
    50. #nav a {
    51.     color: #000000;
    52.     background-color: #FFF8DC;
    53.     text-align: center;
    54.     text-decoration: none;
    55. }
    56. #nav ul a {
    57.     background-color: #D2B48C;
    58.     border: 1px #8B4513 solid;
    59.     width: 120px;
    60.     height: 20px;
    61.     text-align: center;
    62.     text-decoration: none;
    63. }
    64.  
    65. #nav li:hover > a {
    66.     background-color: #8B4513;
    67.     color: #FFFFFF;
    68.     font-weight: bold;
    69.     text-align: center;
    70.     text-decoration: none;
    71. }
    72.  
    73. #nav li a {
    74.     text-align: center;
    75.     text-decoration: none;
    76. }
    77.  
    78. </style>
    79.  
    80. <script type="text/javascript"><!--//--><![CDATA[//><!--
    81.  
    82. sfHover = function() {
    83.     var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    84.     for (var i=0; i<sfEls.length; i++) {
    85.         sfEls[i].onmouseover=function() {
    86.             this.className+=" sfhover";
    87.         }
    88.         sfEls[i].onmouseout=function() {
    89.             this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    90.         }
    91.     }
    92. }
    93. if (window.attachEvent) window.attachEvent("onload", sfHover);
    94.  
    95. //--><!]]></script>
    96.  
    97.  
    98. </head>
    99.  
    100. <body>
    101.  
    102. <table>
    103. <tr>
    104. <td class="forumline">
    105.  
    106. <ul id="nav">
    107.   <li><a href="http://link.de/">Forum</a></li>
    108.   <li><a href="http://link.de/">Listen</a>
    109.     <ul>
    110.       <li><a href="http://link.de/">Mitglieder-Liste</a>
    111.       <li><a href="http://link.de/">Nickpage-Liste</a>
    112.       <li><a href="http://link.de/">Statistik</a></li>
    113.       <li><a href="http://link.de/">Benutzergruppen</a></li>
    114.     </ul>
    115.   </li>
    116.   <li><a href="http://link.de/">Kleinanzeiger</a>
    117.     <ul>
    118.       <li><a href="http://link.de/">Anzeigen</a></li>
    119.       <li><a href="http://link.de/">Anzeige suchen</a></li>
    120.     </ul>
    121.   </li>
    122.   <li><a href="http://link.de/">Info</a>
    123.     <ul>
    124.       <li><a href="http://link.de/">Kalender</a></li>
    125.       <li><a href="http://link.de/">Lexikon</a></li>
    126.       <li><a href="http://link.de/">Sitemap</a></li>
    127.     </ul>
    128.   </li>
    129.   <li><a href="http://link.de/">Fun</a>
    130.     <ul>
    131.       <li><a href="http://link.de/">Bildergalerie</a></li>
    132.       <li><a href="http://link.de/">Arcade Spiele</a></li>
    133.       <li><a href="http://link.de/">User-Karte</a></li>
    134.     </ul>
    135.   </li>
    136.   <li><a href="http://link.de/">Suche</a></li>
    137.   <li><a href="http://link.de/">FAQ</a></li>
    138.   <li><a href="http://link.de/">Login</a></li>
    139.   <li><a href="http://link.de/">Registrieren</a></li>
    140. </ul>
    141.  
    142. </td>
    143. </tr>
    144. </table>
    145.  
    146. </body>
    147.  
    148. </html>
    Kann sein das der Code an manchen Stellen etwas überladen ist!

    Das was ich meine hab ich mal als Screen angehängt.

    Danke!
     

    Anhänge:

  11. Maik

    Maik Gast

    Hi,

    tausch mal diesen Selektor:

    Code (Text):
    1. #nav li:hover > a { ... }
    gegen diesen hier:

    Code (Text):
    1. #nav a:hover  { ... }

    mfg Maik
     
  12. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Ich habe das jetzt so geändert.
    Im Firefox und im IE7 wird jetzt bei dem kompletten <LI> Part die Hintergrundfarbe geändert.
    Im IE6 leider nur wenn man dierekt den Text markiert, aber das wird sich scheinbar nicht ändern lassen oder?
     
  13. Maik

    Maik Gast

    Aber sicher doch :)

    Code (Text):
    1. #nav a {
    2.           display: block;
    3.           text-decoration: none;
    4.           font-family: arial, sans-serif;
    5.           font-size: 12px;
    6.           font-weight:bold;
    7.           color: black;
    8.           height:100%;
    9. }

    mfg Maik
     
  14. PhoenixDH

    PhoenixDH Erfahrenes Mitglied

    Dank dir!
    Mus das Morgen im Betrieb testen hab hier keinen IE6 zur Hand :)

    Aber eines noch, ich habe die Zeilen ein bisschen angepasst:
    Code (Text):
    1. <li><a href="http://link.de/"><img src="./forum.gif" border="0">&nbsp;Forum</a></li>
    D.h. noch ein Bild davor gemacht.

    Die BIlder sind nicht alle gleich hoch!
    Im FF und im IE7 werden die Bilder und der Text schon mittig angezeigt, aber im IE6 sind die alle ein bisschen in der Höhe versetzt.

    Wie bekomme ich das noch weg?

    Dann denke ich bin ich glücklich und dir zu Dank verpflichtet ;)
     
  15. Maik

    Maik Gast

Die Seite wird geladen...
Ähnliche Themen - Down Hoover Menü
  1. NetBull
    Antworten:
    10
    Aufrufe:
    1.892
  2. d_b
    Antworten:
    0
    Aufrufe:
    1.377
  3. Fullii
    Antworten:
    5
    Aufrufe:
    1.181
  4. SchwarzerMagierm
    Antworten:
    2
    Aufrufe:
    707
  5. jdgf
    Antworten:
    2
    Aufrufe:
    1.294