• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Navigationsleiste mit CSS im IE falsch interpretiert

Status
Für weitere Antworten geschlossen.
M

Melinel

Neues Mitglied
Hallo liebe Community,

ich habe folgendes Problem - ich habe mir eine Navigationsleiste
für meine HTML Seite mit CSS gebastelt, nun habe ich soweit eigentlich alles was ich brauche...sie funktioniert einwandfrei zB unter Mozilla aber im Internet Explorer werden meine Hierarchie Unterpunkte von der Navigationsleiste und Farbwechsel überhaupt nicht angezeigt bzw interpretiert?!

Warum:?:
Validiert ist das Dokument auch...

Ich bin kurz vorm verzweifeln, habe schon etliche Foren nach dem Fehler durchforstet aber überhaupt nichts gefunden! Es soll auch nur in CSS geschrieben sein, da ich Java nicht behersche und auch nicht einbinden möchte wegen der Userfreundlichkeit falls es deaktiviert ist...

Ich hoffe ihr könnt mir ein paar Tips dazu geben!
Vielen Dank schon mal im vorraus für eure Mühe...


Code: 
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">


<head>
<title>Navi</title>    
    <style type="text/css">
        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;
  line-height: 20px;
  text-decoration: none;
  text-align: center;
  display: block;
  width: 100px;
  height: 20px;
}
ul.cssmenu li:hover > a {
  background-color: #666666;
  color: #FFFFFF;
  font-weight: bold;
}
/* UntermenupktEinblenden */
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: 150px;
}
/* Farben der einzelnen Ebenen (vererbt)*/
ul.cssmenu a {
  color: #000000;
  background-color: #e4e4e4;
}
ul.cssmenu ul a {
  background-color: #d4d4d4;
}
ul.cssmenu ul ul a{
  background-color: #c4c4c4;
}
ul.cssmenu ul ul ul a{
  background-color: #b4b4b4;
}
 

    </style>
</head>


<body>

<ul class="cssmenu">
  <li><a href="http://test.de/">Home</a></li>
  <li><a href="http://test.de/">Wir &uuml;ber uns</a>
    <ul>
      <li><a href="http://test.de/">Team</a>
        <ul>
          <li><a href="http://test.de/">Fotos</a></li>
          <li><a href="http://test.de/">Betreuer</a></li>
        </ul>
      </li>
      <li><a href="http://test.de/">History</a></li>
      <li><a href="http://test.de/">Entstehungsgeschichte</a></li>
    </ul>
  </li>
  <li><a href="http://test.de/">Dienstleistungen</a></li>
  <li><a href="http://test.de/">Preise</a></li>
  <li><a href="http://test.de/">Kontakt</a></li>    
  <li><a href="http://test.de/">Impressum</a></li>
</ul>
</body>
</html>
 
Das liegt daran, dass der IE das nicht mit CSS kann, weil der :hover nur für <a> kennt.
Bei solchen Menüs hilft nur, eine JavaScript-Alternative für den IE zu schreiben.

Mit Java, wie Du schriebst, hat das übrigens rein gar nichts zu tun.
 
hmm, erstmal vielen Dank für deine schnelle Antwort Efchen...
ach mensch...sowas hab ich schon geahnt...
kann mir vielleicht noch jmd ein gutes Tutorial empfehlen wo ich das
nachlesen kann um es in JavaScript neu zu schreiben?!
 
Efchen schrieb:
Das liegt daran, dass der IE das nicht mit CSS kann, weil der :hover nur für <a> kennt.
Zum Vergrößern anklicken....

Das gilt aber nur bis einschließlich zur Version 6, die Version 7 versteht Pseudo-Klassen auch für andere Tags.

Im IE7 funktioniert es nämlich auch, so wie im FF3.
 
Zuletzt bearbeitet:
Da muss man sich halt überlegen, wie man das löst.
Das wichtigste ist natürlich, dass es von allen weiterhin nutzbar ist, auch ohne JavaScript. Das heißt, man muss Menüpunkte, die aufpoppen auch anklicken können und von dort müssen auch alle Unterpunkte verlinkt sein. Dann poppt beim IE6 halt nichts auf, die Site ist aber weiterhin voll benutzbar.
Des weiteren muss man sich fragen, ob man es sich erlauben kann, IE6-Nutzern weniger Benutzerfreundlichkeit zu bieten und lässt das JS ganz weg. Funktionieren muss es ja auch ohne JS.

Aber man sollte nicht deswegen eine reine JS-Lösung machen und deswegen alle Browser benachteiligen, nur weil es einer nicht gebacken kriegt.
 
Statt
Code: 
li:hover {}
kannst du auch
Code: 
li a:hover {}
verwenden, dann sollte der IE6 das auch verstehen. Dazu sollte der Link in dem Listenelement allerdings den gesamten Platz einnehmen, was mit einem
Code: 
li a {display: block;}
recht einfach zu machen ist.
 
<Thor> schrieb:
Statt
Code: 
li:hover {}
kannst du auch
Code: 
li a:hover {}
verwenden, dann sollte der IE6 das auch verstehen. Dazu sollte der Link in dem Listenelement allerdings den gesamten Platz einnehmen, was mit einem
Code: 
li a {display: block;}
recht einfach zu machen ist.
Zum Vergrößern anklicken....


Vielen Dank, das ist eine gute Idee...sonst hätte ich eine Hover Klasse in JavaScript geschrieben, Danke!
 
Ich habe auf einer meiner Webseiten genau das gleiche Problem und bin der Meinung, dass ein solches Menü mit a:hover nicht zu realisieren ist, sondern nur mit li:hover kombiniert mit JavaScript kombiniert mit Nutzbarkeit auch ohne Dynamik.
Es gäbe eine einfache Lösung mit a-Tags ohne href-Attribut, bei der dann nur a:hover genügt, aber das ist dann invalides html.

Wenn Du also wirklich eine einfache Lösung mit validem html findest, wäre ich über eine kurze Erläuterung sehr dankbar.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben