✔ Sitemap liste im IE falsch

[Denniz]

Hallo Leute,
ich habe eine Sitemap erstellt welche im FF richtig angezeigt wird.
Im IE wird diese allerdings komplett zerschossen.
Im FF sieht diese so aus. -link-
Im IE sieht es dagegen so aus. -link-


Hier der link zu der sitemap:
-link-

Meine HTML:

<div id="sitemap">
  <ul id="sitemap_topic">
    <li><a  href="#" >HOME</a></li>
    <li><a  href="#" >MUSIC</a></li>
    <li><a  href="#" >GALLERY</a></li>
    <ul id="sitemap_sublist">
      <li><a  href="#">2006</a></li>
      <li><a  href="#">2005</a></li>
      <li><a  href="#">2004</a></li>
      <li><a  href="#">2003</a></li>
      <li><a  href="#">2002</a></li>
      <li><a  href="#">2001</a></li>
    </ul>
    <li><a  href="#">BAND</a></li>
    <ul id="sitemap_subtopic">
      <li><a >MEMBERS</a></li>
      <ul id="sitemap_sublist">
        <li><a  href="#">Klaus</a></li>
        <li><a  href="#">Dieter</a></li>
        <li><a  href="#">Egon</a></li>
        <li><a  href="#">RAlf</a></li>
      </ul>
    </ul>
    <li><a  href="#">CONTACT</a></li>
    <li><a  href="#">IMPRESSUM</a></li>
  </ul>
</div>

Meine CSS:

#sitemap {
margin:20px 50px 0 90px;
}

ul#sitemap_topic {
margin-left:15px;
padding:0px;
}

#sitemap_topic li {
list-style-type:none;
background-image: url(dot.gif);
background-repeat: no-repeat;
background-position: 0px ;
}

#sitemap_topic li a {
padding-left:20px;
text-decoration:none;
font: 10px Verdana;
font-weight:bold;
color:#7F253E;
}

#sitemap_topic a:hover {
text-decoration:underline;
}

ul#sitemap_sublist {
padding-left:20px;
margin-left:15px;
text-indent: -15px;
}

ul#sitemap_sublist li {
background-image: none;
list-style-type: circle ;
color:#707070;
}

ul#sitemap_sublist li a {
background-image: none;
text-decoration:none;
font: 10px Verdana;
color:#707070;
}
#sitemap_sublist a:hover {
text-decoration:underline;
}

ul#sitemap_subtopic {
padding-left:20px;
margin-left:15px;
text-indent: -15px;
}

#sitemap_subtopic li {
background-image: none;
list-style-type:square;
color:#7F253E;
}

#sitemap_subtopic li a {
padding-left:20px;
text-decoration:none;
font: 10px Verdana;
}

#sitemap_subtopic a:hover {
text-decoration:none;
}

Gibt es dafür Hacks damit mir die liste genauso angezeigt wird wie im FF, da die Aufzählungszeichen im IE falsch plaziert werden.

Beste Grüße
-denniz

 

[Maik]

Fehler Nr.1: Eine ID muß in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben werden.

Fehler Nr.2: Verschachtelte Listen werden folgendermaßen konstruiert:

<ul>
    <li><a href="#">link 1</a></li>
    <li><a href="#">link 2</a>
           <ul>
               <li><a href="#">link 2.1</a></li>
           </ul>
    </li>
    <li><a href="#">link 3</a>
           <ul>
               <li><a href="#">link 3.1</a>
                      <ul>
                          <li><a href="#">link 3.1.1</a></li>
                      </ul>
               </li>
           </ul>
    </li>
    <li><a href="#">link 4</a></li>
</ul>

Soviel zu den Basics, und hier der Lösungsvorschlag

#sitemap {
margin:20px 50px 0 90px;
}

ul#sitemap_topic {
list-style-type:none;
}

ul#sitemap_topic li {
background-image: url(dot.gif);
background-repeat: no-repeat;
background-position: 0 5px;
}

ul#sitemap_topic li a {
padding-left:20px;
text-decoration:none;
font: 10px Verdana;
font-weight:bold;
color:#7F253E;
}

ul#sitemap_topic a:hover {
text-decoration:underline;
}

ul#sitemap_topic li ul.sitemap_sublist li, ul#sitemap_topic li ul.sitemap_subtopic li ul.sitemap_sublist li {
background-image: none;
list-style-type: circle;
color:#707070;
}

ul#sitemap_topic li ul.sitemap_sublist li a {
padding-left: 0;
background-image: none;
text-decoration:none;
font: 10px Verdana;
color:#707070;
}
ul#sitemap_topic li ul.sitemap_sublist a:hover {
text-decoration:underline;
}

ul#sitemap_topic li ul.sitemap_subtopic li {
background-image: none;
list-style-type:square;
color:#7F253E;
}

ul#sitemap_topic li ul.sitemap_subtopic li a {
padding-left:0px;
text-decoration:none;
font: 10px Verdana;
}

ul#sitemap_topic li ul.sitemap_subtopic a:hover {
text-decoration:none;
}

<div id="sitemap">
  <ul id="sitemap_topic">
    <li><a href="#">HOME</a></li>
    <li><a href="#">MUSIC</a></li>
    <li><a href="#">GALLERY</a>
           <ul class="sitemap_sublist">
               <li><a href="#">2006</a></li>
               <li><a href="#">2005</a></li>
               <li><a href="#">2004</a></li>
               <li><a href="#">2003</a></li>
               <li><a href="#">2002</a></li>
               <li><a href="#">2001</a></li>
           </ul>
    </li>
    <li><a href="#">BAND</a>
           <ul class="sitemap_subtopic">
               <li><a href="#">MEMBERS</a>
                      <ul class="sitemap_sublist">
                           <li><a href="#">Klaus</a></li>
                           <li><a href="#">Dieter</a></li>
                           <li><a href="#">Egon</a></li>
                           <li><a href="#">RAlf</a></li>
                      </ul>
               </li>
           </ul>
    </li>
    <li><a  href="#">CONTACT</a></li>
    <li><a  href="#">IMPRESSUM</a></li>
  </ul>
</div>

 

[Denniz]

Hi Michael,

hast natürlich recht, hätte klassen nehmen müssen.
Die Sitemap wird jetzt richtig dargestellt.
Besten dank für die Tipps.

Gruß
Denniz