Ein für allemal: CSS-float beim IE?

Bastian

Bastian

Aktives Mitglied
Thread Starter
Dabei seit
20.06.2003
Beiträge
533
Reaktionspunkte
10
Hallo zusammen

Es ist zum ko... mit dem Internet Explorer. Ich hoffe, es kann mir jemand helfen.

Das Problem ist die CSS-Eigenschaft float in Verbindung mit dem Internet Explorer für Windoof.

Das Stylesheet:
Code: 
#inhalt {
	float: right;
	width: 526px;
	margin: 0;
	padding: 0; }
	
#navigation	{
	padding: 0;
	margin: 0 528px 0 0; }

Das HTML-Dokument:
Code: 
<BODY>
<div id="inhalt">
...
...
</div>

<div id="navigation">
...
...
</div>
</BODY>

Die Navigation sollte also links auf derselben Höhe wie der Inhalt positioniert werden. Auf allen richtigen Browsern sieht das auch korrekt aus. Der IE aber positioniert die Navigation links unterhalb der Inhalts.

Wieso nur?

Danke für jeden Hinweis.

Gruss
Bastian
 
Wieso? Weil der IE dumm ist. ;) Naa, warte mal. Kann das daran liegen, weil Dein Inhalt und Deine Navigation nur 2 Pixel voneinander entfernt sind? Kommt da nicht die Problematik auf, dass der IE, dumm wie er nun einmal ist, die Padding- (oder waren es die Margin-?) Abstände falsch berechnet? Was passiert, wenn Du
HTML: 
#navigation {
  padding: 0;
  margin: 0 531px 0 0;
}
machst und die Navi einmal etwas weiter vom Inhalt abrückst? Wenn es das Problem ist, dann müsste eigentlich der Box Model Hack (z.B. hier geschaut) helfen.

Grüße
SB
 
Hab jetzt gerade keinen windows Rechner, an dem ich das ausprobieren kann, aber hast du mal versucht, den Inhalt rechts um die Navigation zu floaten? Also genau andersrum als in deinem Beispiel. Das wäre doch kein Unterschied für dich (oder?) und vielleicht funktioniert das. Müßte dann wohl so aussehen:

Stylesheet
#{
width: 526px;
margin: 0;
padding: 0; }

#navigation {
float: left;
padding: 0;
margin: 0 528px 0 0; }
Zum Vergrößern anklicken....

Viel Glück.
 
Vielen Dank für die Antworten. Ich habe beides ausprobiert und dabei herausgefunden, woran es tatsächlich liegt.

Es spielt keine Rolle, welches Element mit float deklariert wird. Eben so wenig margin und padding der Navigation.

Im Navigations-Div-Tag steht Folgendes:

Code: 
<p>Text</p>
<img src='grafiken/layout/navigation-linie.jpg'>
<h2>Text</h2>
<p>Text</p>

Die Grafik ist eine Trennlinie, welche die Navigationselemente voneinander trennen soll. Diese Grafik ist exakt 180px breit. Also genau so breit, wie die Navigation.
Diese Grafik und alles was in der Navigation danach folgt umfliesst den Inhalt nicht mehr! Lasse ich die Grafik weg, sieht alles i.O. aus.

Wieso verhält sich dies beim IE denn so?
 
Zuletzt bearbeitet:
Der Box-Model-Hack funktioniert beim IE 6.x übrigens nicht. Hab ich soeben ausprobiert. :(
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten