IE Problem mit verschachtelter Liste

[Martin Hölter]

Hallo Forum!

Der IE macht mir Probleme mit einer verschachtelten Liste (Navigation).
Zu bewundern ist das ganze unter http://sparkasseiserlohn.de/ihre_sparkasse/beitraege/wirtschaft_und_politik/index.htm.

Die Listen-Elemente, die vor der Verschachtelung stehen, werden erst beim hovern sichtbar und bleiben es danach auch.

Kennt jemand von euch das Problem und kann mir helfen?

Hier noch der betroffene Code:

HTML:

<ul id="subnav">
  <li><a href="../../ihre_meinung_ist_uns_wichtig.htm" title="Ihre Meinung ist uns wichtig">Ihre Meinung ist uns wichtig</a></li>
  <li><a href="../../wir_ueber_uns.htm" title="Wir &uuml;ber uns">Wir &uuml;ber uns</a></li>
  <li><a href="../../mit_engagement_fuer_unsere_stadt/index.htm" title="Mit Engagement f&uuml;r unsere Stadt">Mit Engagement f&uuml;r unsere Stadt</a></li>
  <li><a href="../../buergerstiftung_der_sparkasse/index.htm" title="B&uuml;rgerstiftung der Sparkasse Iserlohn">B&uuml;rgerstiftung der Sparkasse</a></li>
  <li><a href="http://www.iserlohn-kunstpreis.de" title="Iserlohner Kunstpreis - vergeben durch die B&uuml;rgerstiftung der Sparkasse Iserlohn">Iserlohner Kunstpreis</a></li>
  <li><a href="../../s-probis.htm" title="S-Probis - Sparkassen-Projektbeteiligungen Iserlohn GmbH"><img src="../../../images/s_9wtgen.gif" alt="S-" title="">Probis</a></li>
  <li><a href="../../servicecenter/index.htm" title="ServiceCenter">ServiceCenter</a></li>
  <li><a href="../../ausstellungen_und_veranstaltungen.htm" title="Ausstellungen und Veranstaltungen">Ausstellungen und Veranstaltungen</a></li>
  <li><a href="../../newsletter/index.htm" title="Newsletter - w&ouml;chentlich aktuelle Neuigkeiten von Ihrer Sparkasse">Newsletter</a></li>
  <li><a href="../../ihre_ansprechpartner/index.htm" title="Ihre Ansprechpartner in unseren Fachabteilungen">Ihre Ansprechpartner</a></li>
  <li><a href="../../geschaeftsstellen/index.htm" title="unsere Gesch&auml;ftsstellen">Gesch&auml;ftsstellen</a></li>
  <li><a href="../../virtuell_durch_die_hauptstelle/index.htm" title="virtuell durch die Hauptstelle">virtuell durch die Hauptstelle</a></li>
  <li><a href="../../beitraege/index.htm" title="laufend aktuelle Beitr&auml;ge und Informationen">Beitr&auml;ge</a></li>
  <li><ul>
   <li><a href="../../newsletter/index.htm" title="Newsletter - w&ouml;chentlich aktuelle Neuigkeiten von Ihrer Sparkasse">Newsletter</a></li>
   <li><a href="../finanzen/index.htm" title="Beitr&auml;ge zum Thema Finanzen" class="aktiv">Finanzen</a></li>
   <li><a href="../bauen_und_wohnen/index.htm" title="Beitr&auml;ge zum Thema Bauen und Wohnen"">Bauen und Wohnen</a></li>
   <li><a href="../steuern/index.htm" title="Beitr&auml;ge zum Thema Steuern">Steuern</a></li>
   <li><a href="../internet/index.htm" title="Beitr&auml;ge zum Thema Internet">Internet</a></li>
   <li><a href="./index.htm" title="Beitr&auml;ge zum Thema Wirtschaft und Politik">Wirtschaft und Politik</a></li>
  </ul></li>
  <li><a href="../../tipps_zur_website.htm" title="Tipps zur Website Sparkasse-Iserlohn.de">Tipps zur Website Sparkasse-Iserlohn.de</a></li>
 </ul>

CSS:
#nav  /*Navigationsbereich links*/
  {clear:left;  /*clear beendet das floaten, somit steht die Navigation unter dem roten Bereich*/
  float:left;  /*wird links umflossen*/
  width:184px;  /*184 Pixel breit*/
  background-color:#AAA;}

#nav ul  {list-style-type:none;
  margin:0;
  /*padding:0;*/
  border-top:1px solid #FFF;}

#mainnav li {border-bottom:1px solid #FFF;}

#mainnav a  /*Links im Navigationscontainer*/
  {display:block;  /* werden als Block-Elemente angezeigt, somit gehen Sie ueber die gesamte Breite des Elternelements (also des Navigationscontainers)*/
  background-color:#AAA;
  text-transform:uppercase; /*Grossbuchstaben*/
  font-size:1.1em;
  font-weight:bolder;
  padding:1px 0 2px 10px; /*Innenabstand: oben:2 Pixel, rechts:0, unten:2 Pixel,  links: 10 Pixel*/}

#mainnav a:link, #nav a:visited /*Navigationslinks werden weiss*/
  {color:#FFF;}

#mainnav a:hover, #nav a:active, #nav a:focus /*Navigationslinks werden beim ueberfahren weiss auf rot*/
   {background-color:#F00;
  color:#FFF;}

#mainnav a.aktiv:link, #mainnav a.aktiv:visited, #mainnav a.aktiv:hover, #mainnav a.aktiv:active, #mainnav a.aktiv:focus
  {background-color:#F00;}

#subnav  /*Subnavigation (hellgrauer Bereich)*/
  {padding-top:35px; /*Innenabstand oben: 40 Pixel*/
  padding-left:2px; /*Innenabstand links: 3 Pixel*/
  background-color:#EEE;
  font-weight:bold;
  border-style:none;}

#subnav li {padding-left:10px;
  padding-top:2px;
  padding-bottom:2px;}

#subnav a {display:inline;
  background-color:#EEE;
  font-size:11px;
  text-transform:none;} /*keine Grussbuchstaben*/

#subnav a:link, #subnav a:visited {color:#666;}

#subnav a:hover, #subnav a:active, #subnav a:focus
  {color:#F00;
  background-color:#EEE;}

#subnav a.aktiv:link, #subnav a.aktiv:visited, #subnav a.aktiv:hover, #subnav a.aktiv:active, #subnav a.aktiv:focus
  {color:#F00;}

#subnav ul {padding-left:10px; /*Sub-Sub-Navigation*/
  border:none;}

#subnav ul a {font-weight:normal;}

Vielen Dank vorab für Eure Hilfe!

Gruß

Martin

[Thomas J.S.]

Hallo,

Der IE macht mir Probleme mit einer verschachtelten Liste (Navigation).

Ich habe dein Problem auf die verursachende Angabe eingegrenzt (/*padding-top:2px;*/ in #subnav li ), ich denke mit dem Rest kommt du eh klar.

Grüße
Thomas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="DE">
<head>
 <title>Untitled</title>
 <style type="text/css">
  #subnav {
  padding-top:35px;
  padding-left:2px;
  background-color:#EEE;
  font-weight:bold;
  border-style:none;
  }

#subnav li {
   padding-left:10px;
   /*padding-top:2px;*/
   padding-bottom:2px;
  }

#subnav a {
   display:inline;
   background-color:#EEE;
   font-size:11px;
   text-transform:none;
  }
  #subnav a:link, #subnav a:visited { color:#666; }
  #subnav a:hover, #subnav a:active, #subnav a:focus { color:#F00; background-color:#EEE; }
  #subnav a.aktiv:link, #subnav a.aktiv:visited, #subnav a.aktiv:hover, #subnav a.aktiv:active, #subnav a.aktiv:focus { color:#F00; }
  #subnav ul { padding-left:10px; border:none; }
  #subnav ul a {font-weight:normal;}

</style>
</head>

<body>
 <ul id="subnav">
  <li><a href="../../ihre_meinung_ist_uns_wichtig.htm" title="Ihre Meinung ist uns wichtig">Ihre Meinung ist uns wichtig</a></li>
  <li><a href="../../wir_ueber_uns.htm" title="Wir &uuml;ber uns">Wir &uuml;ber uns</a></li>
  <li><a href="../../mit_engagement_fuer_unsere_stadt/index.htm" title="Mit Engagement f&uuml;r unsere Stadt">Mit Engagement f&uuml;r unsere Stadt</a></li>
  <li><a href="../../buergerstiftung_der_sparkasse/index.htm" title="B&uuml;rgerstiftung der Sparkasse Iserlohn">B&uuml;rgerstiftung der Sparkasse</a></li>
  <li><a href="http://www.iserlohn-kunstpreis.de" title="Iserlohner Kunstpreis - vergeben durch die B&uuml;rgerstiftung der Sparkasse Iserlohn">Iserlohner Kunstpreis</a></li>
  <li><a href="../../s-probis.htm" title="S-Probis - Sparkassen-Projektbeteiligungen Iserlohn GmbH">Probis</a></li>
  <li><a href="../../servicecenter/index.htm" title="ServiceCenter">ServiceCenter</a></li>
  <li><a href="../../ausstellungen_und_veranstaltungen.htm" title="Ausstellungen und Veranstaltungen">Ausstellungen und Veranstaltungen</a></li>
  <li><a href="../../newsletter/index.htm" title="Newsletter - w&ouml;chentlich aktuelle Neuigkeiten von Ihrer Sparkasse">Newsletter</a></li>
  <li><a href="../../ihre_ansprechpartner/index.htm" title="Ihre Ansprechpartner in unseren Fachabteilungen">Ihre Ansprechpartner</a></li>
  <li><a href="../../geschaeftsstellen/index.htm" title="unsere Gesch&auml;ftsstellen">Gesch&auml;ftsstellen</a></li>
  <li><a href="../../virtuell_durch_die_hauptstelle/index.htm" title="virtuell durch die Hauptstelle">virtuell durch die Hauptstelle</a></li>
  <li><a href="../../beitraege/index.htm" title="laufend aktuelle Beitr&auml;ge und Informationen">Beitr&auml;ge</a></li>
  <li><ul>
   <li><a href="../../newsletter/index.htm" title="Newsletter - w&ouml;chentlich aktuelle Neuigkeiten von Ihrer Sparkasse">Newsletter</a></li>
   <li><a href="../finanzen/index.htm" title="Beitr&auml;ge zum Thema Finanzen" class="aktiv">Finanzen</a></li>
   <li><a href="../bauen_und_wohnen/index.htm" title="Beitr&auml;ge zum Thema Bauen und Wohnen"">Bauen und Wohnen</a></li>
   <li><a href="../steuern/index.htm" title="Beitr&auml;ge zum Thema Steuern">Steuern</a></li>
   <li><a href="../internet/index.htm" title="Beitr&auml;ge zum Thema Internet">Internet</a></li>
   <li><a href="./index.htm" title="Beitr&auml;ge zum Thema Wirtschaft und Politik">Wirtschaft und Politik</a></li>
  </ul></li>
  <li><a href="../../tipps_zur_website.htm" title="Tipps zur Website Sparkasse-Iserlohn.de">Tipps zur Website Sparkasse-Iserlohn.de</a></li>
 </ul>

</body>
</html>

[Martin Hölter]

Hallo Thomas!

Ich habe dein Problem auf die verursachende Angabe eingegrenzt (/*padding-top:2px;*/ in #subnav li ), ich denke mit dem Rest kommt du eh klar.

Vertehe, wer will! Der IE kriegt jetzt sein padding:0 und soll zufrieden sein.

Vielen Dank für deine Hilfe!

Gruß

Martin

[Ingo Turski]

Hi,

übrigens überlagert der "Schnelleinstieg" im IE die horizontale Navigation. Und daneben wird ein Bild nicht angezeigt, dessen Platzhalter die Navigation ebenfalls überlagert.

freundliche Grüße
Ingo

[Martin Hölter]

Hallo Ingo!

übrigens überlagert der "Schnelleinstieg" im IE die horizontale Navigation. Und daneben wird ein Bild nicht angezeigt, dessen Platzhalter die Navigation ebenfalls überlagert.

Da hab ich nur vergessen, den Pfads zum Bild für den "<noscript>-Submit" anzupassen.

Vielen Dank für den Hinweis!
Gruß

Martin