CSS Down Hoover Menü im IE geht nicht

PhoenixDH · 25.11.08 21:06

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 :

body {
    background-color: #FFE1BD;
    scrollbar-face-color: #D2B48C;
    scrollbar-highlight-color: #F5DEB3;
    scrollbar-shadow-color: #D2B48C;
    scrollbar-3dlight-color: #FFF8DC;
    scrollbar-arrow-color:  #8B4513;
    scrollbar-track-color: #FFF8DC;
    scrollbar-darkshadow-color: #8B4513;
}
 
.forumline  { background-color: #F5DEB3; border: 2px #8B4513 solid; }
 
ul.cssmenu {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
}
ul.cssmenu ul {
  position: relative;
  display: none;
}
ul.cssmenu li {
  position: relative;
  display: inline;
  float: left;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  font-family: arial, sans-serif;
  font-size: 12px;
  font-weight:bold;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 20px;
}
ul.cssmenu li:hover > a {
  background-color: #8B4513;
  color: #FFFFFF;
  font-weight: bold;
}
/* Untermenüpunkt einblenden */
ul.cssmenu li:hover > ul {
  position: absolute;
  top: 20px;
  left: -40px;
  display: inline;
}
/* ab zweite Ebene */
ul.cssmenu li li:hover > ul {
  top: 0px;
  left: 110px;
}
ul.cssmenu li li a {
  width: 120px;
}
/* Farben der einzelnen Ebenen (werden vererbt)*/
ul.cssmenu a {
  color: #000000;
  background-color: #FFF8DC;
}
ul.cssmenu ul a {
  background-color: #D2B48C;
  border: 1px #8B4513 solid;
}
ul.cssmenu ul ul a{
  background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
  background-color: #b4b4b4;
}
 
/* zusätzliche Styleangaben für IE 6 */
/* das Menü wird dort untereinander dargestellt */
ul.cssmenu {
  _text-indent: 10px;
}
ul.cssmenu ul {
  _display: inline;
  _margin-left: 0px;
  _text-indent: 20px;
}
ul.cssmenu ul ul {
  _text-indent: 30px;
}
ul.cssmenu ul ul ul {
  _text-indent: 40px;
}
ul.cssmenu li {
  _float: none;
}
/* Menupunkt stylen */
ul.cssmenu li a {
  _text-align: left;
  _width: 120px;
}
ul.cssmenu a:hover {
  _font-weight: bold;
  _background-color: #8B4513;
}

HTML:

Code :

<table>
<tr>
<td class="forumline">
 
<link rel="stylesheet" href="css.css" type="text/css">
 
 
<ul class="cssmenu">
  <li><a href="http://XYT.de/">Forum</a></li>
  <li><a href="http://XYT.de/">Listen</a>
    <ul>
      <li><a href="http://XYT.de/">Mitglieder-Liste</a>
      <li><a href="http://XYT.de/">Nickpage-Liste</a>
      <li><a href="http://XYT.de/">Statistik</a></li>
      <li><a href="http://XYT.de/">Benutzergruppen</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Kleinanzeiger</a>
    <ul>
      <li><a href="http://XYT.de/">Anzeigen</a></li>
      <li><a href="http://XYT.de/">Anzeige suchen</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Info</a>
    <ul>
      <li><a href="http://XYT.de/">Kalender</a></li>
      <li><a href="http://XYT.de/">Lexikon</a></li>
      <li><a href="http://XYT.de/">Sitemap</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Fun</a>
    <ul>
      <li><a href="http://XYT.de/">Bildergalerie</a></li>
      <li><a href="http://XYT.de/">Arcade Spiele</a></li>
      <li><a href="http://XYT.de/">User-Karte</a></li>
    </ul>
  </li>
  <li><a href="http://XYT.de/">Suche</a></li>
  <li><a href="http://XYT.de/">FAQ</a></li>
  <li><a href="http://XYT.de/">Login</a></li>
  <li><a href="http://XYT.de/">Registrieren</a></li>
</ul>
 
</td>
</tr>
</table>

In der CSS sollte jedoch der IE schon abgefangen werden, was aber auch nicht klappt!

Hoffe ihr könnt mir helfen! Dank euch!

Maik · 26.11.08 07:14

Hi,

schau dir mal Suckerfish Dropdowns an - die funktionieren im IE6 einwandfrei.

mfg Maik

PhoenixDH · 26.11.08 07:26

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.

Maik · 26.11.08 07:29

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

PhoenixDH · 26.11.08 07:58

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

Maik · 26.11.08 12:17

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

CSS Down Hoover Menü im IE geht nicht-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

PhoenixDH · 27.11.08 07:17

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!"

Maik · 27.11.08 07:25

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

Maik · 27.11.08 07:55

Zitat von PhoenixDH

Hab hier den IE 7, da gehts net!

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

Dann hast du den Doctype

Code :

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:

CSS Down Hoover Menü im IE geht nicht-ie7.jpg

mfg Maik

PhoenixDH · 27.11.08 09:08

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 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
 
<head>
<title>Suckerfish Dropdowns - One Level Bones</title>
 
<style type="text/css">
 
body {
    font-family: arial, helvetica, serif;
    background-color: #FFE1BD;
}
 
.forumline  { background-color: #F5DEB3; border: 2px #8B4513 solid; }
 
#nav, #nav ul { /* all lists */
    padding: 0;
    margin: 0;
    list-style: none;
    line-height: 20px;
}
 
#nav a {
    display: block;
    text-decoration: none;
    font-family: arial, sans-serif;
    font-size: 12px;
    font-weight:bold;
    color: black;
}
 
#nav li { /* all list items */
    float: left;
    width: 90px; /* width needed or else Opera goes nuts */
    height: 20px;
    background-color: #FFF8DC;
}
 
#nav li ul { /* second-level lists */
    position: absolute;
    width: 120px;
    left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
 
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */
    left: auto;
}
 
#nav a {
    color: #000000;
    background-color: #FFF8DC;
    text-align: center;
    text-decoration: none;
}
#nav ul a {
    background-color: #D2B48C;
    border: 1px #8B4513 solid;
    width: 120px;
    height: 20px;
    text-align: center;
    text-decoration: none;
}
 
#nav li:hover > a {
    background-color: #8B4513;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}
 
#nav li a {
    text-align: center;
    text-decoration: none;
}
 
</style>
 
<script type="text/javascript"><!--//--><![CDATA[//><!--
 
sfHover = function() {
    var sfEls = document.getElementById("nav").getElementsByTagName("LI");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
            this.className+=" sfhover";
        }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
//--><!]]></script>
 
 
</head>
 
<body>
 
<table>
<tr>
<td class="forumline">
 
<ul id="nav">
  <li><a href="http://link.de/">Forum</a></li>
  <li><a href="http://link.de/">Listen</a>
    <ul>
      <li><a href="http://link.de/">Mitglieder-Liste</a>
      <li><a href="http://link.de/">Nickpage-Liste</a>
      <li><a href="http://link.de/">Statistik</a></li>
      <li><a href="http://link.de/">Benutzergruppen</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Kleinanzeiger</a>
    <ul>
      <li><a href="http://link.de/">Anzeigen</a></li>
      <li><a href="http://link.de/">Anzeige suchen</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Info</a>
    <ul>
      <li><a href="http://link.de/">Kalender</a></li>
      <li><a href="http://link.de/">Lexikon</a></li>
      <li><a href="http://link.de/">Sitemap</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Fun</a>
    <ul>
      <li><a href="http://link.de/">Bildergalerie</a></li>
      <li><a href="http://link.de/">Arcade Spiele</a></li>
      <li><a href="http://link.de/">User-Karte</a></li>
    </ul>
  </li>
  <li><a href="http://link.de/">Suche</a></li>
  <li><a href="http://link.de/">FAQ</a></li>
  <li><a href="http://link.de/">Login</a></li>
  <li><a href="http://link.de/">Registrieren</a></li>
</ul>
 
</td>
</tr>
</table>
 
</body>
 
</html>

Kann sein das der Code an manchen Stellen etwas überladen ist!

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

Danke!

Maik · 27.11.08 12:19

Hi,

tausch mal diesen Selektor:

Code :

1	#nav li:hover > a { ... }

gegen diesen hier:

Code :

1	#nav a:hover { ... }

mfg Maik

PhoenixDH · 27.11.08 14:05

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?

Maik · 27.11.08 16:38

Aber sicher doch

Code :

#nav a {
          display: block;
          text-decoration: none;
          font-family: arial, sans-serif;
          font-size: 12px;
          font-weight:bold;
          color: black;
          [B]height:100%;[/B]
}

mfg Maik

PhoenixDH · 27.11.08 17:39

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 :

1	<li><a href="http://link.de/"><img src="./forum.gif" border="0"> 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

Maik · 27.11.08 17:55

Zur Abwechslung gibt's für dich jetzt mal etwas Lektüre zum Lesen: Grafik zum umgebenden Text ausrichten und Grafiken ausrichten mit CSS.

mfg Maik

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2010 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team	» Tutorials » Videotutorials » Events & Contests » Chat » RSS-Feed	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials.de » Rettet das Internet » Webmasterpro

Thema: CSS Down Hoover Menü im IE geht nicht

Themen-Optionen

Anzeige

Ähnliche Themen

Navigation oben waagerecht - Hoover - Effekt

Menü geht auf manchen Rechner nicht. Wieso?

IE geht Menü nicht, aber FF schon. Wo liegt das Prob?

Ein Link im Menü geht nicht!

CSS Menü aus einem Buch geht nicht

Lesezeichen

Lesezeichen