CSS: IE6 verschiebt Aufzählung

[Nuckelhamster]

Hallo,

wir haben ein kleines IE6-Anzeigeproblem...

Hier die Seite im Entwurfsstadium: Siedlergemeinschaft

Firefox, Opera, IE7 und Safari zeigen sie einwandfrei an.

Nur der IE6 verschiebt die Aufzählung rechts: http://wp1090449.wp126.webpack.hosteurope.de/ie.jpg

Leider kann ich auf meinem iMac den IE6 nicht testen. Die Fehlersuche/-behebung ist da sehr schleppend...

Ich hab schonmal vorsichtshalber eine Browserweiche eingebaut, falls nötig. Zum Testen, ob sie funktioniert, habe ich h2 "rot" formatiert.

CSS: http://wp1090449.wp126.webpack.hosteurope.de/wp-content/themes/sgf/style.css
(IE-Variante ist noch identisch)

Danke für jeden Tipp!

 

[koslowski]

Hi,

der IE hat nervige Fehler Listennavis betreffend.
Ich helfe mir immer so:

Fehler des IE korrigiere ich über Conditionell Comment (praktisch, da nur die angesprochene IE-Version das sieht).

definiere da schon von Hause aus zwei Sachen:

ul { height:1%;  }
            li  { height:1%;  }

die Ursache der falschen Darstellung im IE ist nämlich fast immer das ein Element kein Layout hat und das behebe ich damit.

Hier ein Superartikel dazu.

Noch eine Kleinigkeit:
die ganze rechte Seite in eine ul zu packen ist semantisch nicht korrekt.
Da gibt es bessere Möglichkeiten, schon um IE-Fehlern aus dem Weg zu gehen z.B.:

body id="startseite">
<div id="wrapper">
<p><a href="#rechtsinnen" class="skiplink">Zum Inhalt</a></p>
  <div id="kopf">
    <h1>Hauptüberschrift</h1>
  </div>
  <!--Ende #kopf-->

  <div id="linksaussen">
  <div id="linksinnen">
  </div><!--Ende #linksinnen-->
  </div><!--Ende #linksaussen-->
  
  <div id="rechtsaussen">
  <div id="rechtsinnen">
  </div><!--Ende #rechtsinnen-->
  </div><!--Ende #rechtsaussen-->
  
  <br class="clear" />
  
  <div id="fuss">
  
  </div><!--Ende #fuss-->
  
  <p><a href="#navi01" class="skiplink">Zur Hauptnavigation</a></p>
  <p><a href="#rechtsinnen" class="skiplink">Zum Anfang Inhalt</a></p>
  
  </div><!--Ende #wrapper-->
  
</body>

Erklärung:
Für die rechte und linke Spalte nehme ich einen äußeren und einen inneren Container.

Floaten laß ich nur die äußeren, die Abstände definiere ich nur im inneren Container.

Dadurch tauchen eine Menge IE-Probleme gar nicht erst auf.
Außerdem fallen lästige Rechenaufgaben bezüglich der wahren Breite einer Box ins off.

Eine Frage noch:

wozu ist das denn gut:

<div id="topcontainer">
</div>

leere Elemente sind doch überflüssig (außer ein <br /> oder <hr /> zum clearen).

Für die Abstände der Elemente zueinander gibts doch z.B. margin