Hallo Tobias,
Mein Problem im IE ist leider immer noch nicht gelöst...
Falsch ist, dass der IE den schwarzen Rahmen oberhalb der Navi-leiste weglässt...
Er interpretiert padding-top für #head nicht richtig, daran liegt es. Wenn du ein wenig am Wert herumspielst, ihn bspw. erhöhst, erscheint der Abstand. Vielleicht liegt's am relativen em-Wert.
Ich kann dir nur raten, das Konzept zu ändern, beispielsweise dass du das #head-div herausnimmst und nur das #navigation-div verbleiben lässt, welches dann auch ein p-Element sein könnte. Den schwarze »Rahmen«, welcher momentan lediglich die Hintergrundfarbe des #head-Elements ist, könntest du mit border lösen. Der blaue Hintergrund würde dann natürlich bis zum rechten Rand durchgehen...
Noch etwas anderes: Anstatt Klassen zu vergeben könntest du beispielsweise mit Nachkommensselektoren arbeiten.
<div id="navigation"> ... <a class="nav" href="/uebermich/">Über mich</a> ...</div>
a.nav:link {...}
a.nav:visited {...}
a.nav:hover {...}
a.nav:active {...}
Das ist umständlich, einfacher geht es so:
<div id="navigation"> ... <a href="uebermich/">Über mich</a> ...</div>
#navigation a:link {...}
#navigation a:visited {...}
usw.
Dasselbe gilt für die span-Elemente in der Navigation. Wenn sonst keine span-Element vorkommen und solche nur für die Trennzeichen verwendet werden, kannst du dir die Klassen ebenfalls sparen und einfach alle span-Elemente innerhalb des #navigation-Elements als solche behandelt:
<div id="navigation"> ... <span class="trennzeichen">||</span> .. </div>
.trennzeichen {...}
...wird zu...
<div id="navigation"> ... <span>||</span> ... </div>
#navigation span {...}
Wie oben gesagt würde ich im Falle des Falles ein p-Element einsetzen.
Grüße,
Mathias
believing atheist ;)