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

Dieses Thema im Forum "Web Page Design" wurde erstellt von Bastian, 17.03.2005.

  1. Bastian

    Bastian Thread Starter MacUser Mitglied

    Beiträge:
    536
    Zustimmungen:
    10
    MacUser seit:
    20.06.2003
    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
     
  2. SilentBob

    SilentBob MacUser Mitglied

    Beiträge:
    361
    Zustimmungen:
    0
    MacUser seit:
    01.02.2005
    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
     
  3. Joost

    Joost MacUser Mitglied

    Beiträge:
    438
    Zustimmungen:
    11
    MacUser seit:
    09.10.2004
    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
    Viel Glück.
     
  4. Bastian

    Bastian Thread Starter MacUser Mitglied

    Beiträge:
    536
    Zustimmungen:
    10
    MacUser seit:
    20.06.2003
    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: 17.03.2005
  5. Bastian

    Bastian Thread Starter MacUser Mitglied

    Beiträge:
    536
    Zustimmungen:
    10
    MacUser seit:
    20.06.2003
    Der Box-Model-Hack funktioniert beim IE 6.x übrigens nicht. Hab ich soeben ausprobiert. :(
     
Die Seite wird geladen...