Div-Layout: Probleme im IE

[Der Martin]

Hallo,

<div id="page">

<div id="logo"></div>

die Bezeichnung "logo" lässt vermuten, dass dieses Element nur eine Grafik enthalten wird (in deinem Fall als Hintergrundbild). Falls dem wirklich so ist: Wozu ein div? Dann kannst du ebensogut das Bild als img-Element direkt positionieren, ohne ein zusätzliches Container-Element drüberzustülpen.

<div id="lang"><a href="#" class="lang">Deutsch</a> | <a href="#" class="lang">English</a> | <a href="#" class="lang">Romania</a></div>

Das sieht aus, als möchte div#lang eigentlich eine Liste sein, anstatt eines bedeutungsleeren div. Und anstatt alle Links mit einer Klasse auszustatten, kannst du sie ebensogut über #lang a {...} selektieren.

<div id="subnav"><a href="#" class="servicenav">Home</a> | <a href="#" class="servicenav">Uber uns</a> | <a href="#" class="servicenav">News</a> | <a href="#" class="servicenav">Jobs</a> | <a href="#" class="servicenav">Kontakt</a> | <a href="#" class="servicenav">Sitemap</a> | <a href="#" class="servicenav">Impressum</a></div>

Dito.

#page{
width:60em;
height:*;

Was soll das denn? Das ist nach meiner Kenntnis keine gültige Angabe für height.

#lang{
vertical-align: bottom;
text-align: right;
float: right top;

Ist "top" ein gültiger Wert für float? Wäre mir neu ...

Im FF siehst korrekt aus: Logo rechts oben, Sprachwahl und Subnavigation links wobei die Suabnav unterhalb der Sprachwahl ist.

Du definierst viele Größen in em, also relativ zur Schriftgröße. Das ist an sich gut, bewirkt aber auch, dass die Aufteilung je nach dem Verhältnis der Default-Schriftgröße des Browsers zur Fenstergröße variieren kann.

Außerdem solltest du bei allen width- und height-Angaben nicht vergessen, dass der IE (zumindest bis Version 6) diese als min-width bzw. min-height auffasst. Das heißt, er macht das Element ungefragt größer, wenn er meint, der Inhalt würde das erfordern. Vielleicht ist das auch dein Problem.

So long,
 Martin