Div-Layout: Probleme im IE

[DasMan]

Hallo

Habe ein Layout mittels Div und der Float Eigenschaft erstellt. Im Firefox sieht alles toll aus, im IE ist jedoch nichts so wie es sollte.
Alle Elemente werden auf jeweils verschoben dargestellt, nichts passt mehr zusammen!!!

An was kann das liegen? Muss ich mein Layout mit Tabellen machen? Funktioniert die Float Variante nicht im iE?

Thx Dasman

[Helmut Weber]

Hallo Dasman,

An was kann das liegen? Muss ich mein Layout mit Tabellen machen? Funktioniert die Float Variante nicht im iE?

Nein, dein Layout musst Du nicht mit Tabellen erstellen, sondern das Problem finden, warum der IE deine Seite anders darstellt. Grundsätzlich versteht der IE auch die float-Anweisung, aber vermutlich fügt der Browser an einigen Stellen einen Abstand ein, an denen Du es nicht vermutest (Stichwort Box-Modell-Fehler des Internet Explorer).

Um Dir aber weiter helfen zu können benötigen wir entweder den Quelltext deiner Seite oder die entsprechende Adresse im Internet.

Herzliche Grüße aus Weinsberg
Helmut Weber

[DasMan]

sehr gerne:

HTML:
--------------
<div id="page">

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

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

<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>

</div>
--------------

CSS:
--------------
#page{
 width:60em;
 height:*;
 margin: 0px auto;
 vertical-align: top;
 text-align: left;
 background-color: #FFFFFF;
 padding-left:1.2em;
 padding-right:1.2em;
 padding-bottom:1.2em;
 padding-top:0.4em;
 }
#logo{
 float: left;
 height: 4em;
 width: 10em;
 background-image: url(/_images/logo.gif);
 background-position: left top;
 background-repeat: no-repeat;
 border: none;
 }
#lang{
 vertical-align: bottom;
 text-align: right;
 float: right top;
 width: 31.25em;
 height: 1.3em;
 margin-left: 28.75em;
 margin-top: 10px;
 border: none;
 color: #000000;
 }
#subnav{
 text-align: right;
 width: 31.25em;
 height: 1.3em;
 margin-left: 28.75em;
 margin-top: 0.625em;
 border: none;
 color: #000000;
 }
--------------

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

thx

[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

[Gunnar Bittersmann]

Hello out there!

Habe ein Layout mittels Div und der Float Eigenschaft erstellt. Im Firefox sieht alles toll aus, im IE ist jedoch nichts so wie es sollte.
Alle Elemente werden auf jeweils verschoben dargestellt, nichts passt mehr zusammen!!!

An was kann das liegen?

An Bugs des IE. Oder am Quirksmode. Wer weiß das schon. Die Glaskugel nicht.

Muss ich mein Layout mit Tabellen machen?

Nein.

See ya up the road,
Gunnar

[Cheatah]

Hi,

Habe ein Layout mittels Div [...] erstellt.

es gibt kein <div>-Layout. <div>-Elemente dienen der Gruppierung zusammengehörender Elemente und haben *nichts* mit Layout zu tun. Dafür ist ganz allein CSS zuständig. Zum Rest siehe bestehende Antworten.

Cheatah