Adriana Mikolaskova Nautsch: Problem mit float im IE

Hallo,

ich habe ein Problem mit floats, welches ich mir nicht richtig erklären kann, d.h. ich weiss nicht richtig mit welchen Stichworten ich nach einer Lösung suchen könnte.

Ich habe eine links gefloatete Navigation, einen Content-Bereich, der sich wiederum in eine links gefloatete Subnavigation und Subtext gliedert. Im Subtext möchte ich in einem bestimmten Fall Bildblöcke (Bild und Bildbeschriftung in einem div) anordnen. Da ich offen lassen möchte, wieviele Bildblöcke pro Zeile dargestellt werden, habe ich die Blocke wiederum mit float:left formatiert.

Hier die Seite- für den Fall das meine Erklärung unverständlich ist.

Das ganze funktioniert wie erwartet in allen normalen Browsern. Im IE entsteht allerdings nach der ersten Zeile ein Leerraum, dessen Grösse abhängig von derjenigen der Listenelemente in Navigation und Subnavigation.

Könnte mir bitte jemand einen Hinweis geben, weshalb das so ist?

Vielen Dank und Gruss

Adriana

  1. Hi Adriana,

    offen gestanden habe ich dein Problem auch noch nicht so wirklich verstanden. Da ich mich aber mit solchen Dingen auch schon viel zu tun hatte, habe ich leichte Ahnungen.

    Tipp 1: Problem mit horizontalem margin (macht IE teils doppelt so breit, wie eigentlich deklariert), -> Sternchen-Hack
    Tipp 2: fast ganz unten im Quelltext stehen zwei geöffnete divs: <div >, die nicht geschlossen werden. Fehler immer erst beseitigen, bevor man nach anderen Problemen sucht.
    Tipp 3: Um ganz am Ende der Seite kein Problem mit geschlossenen divs zu haben, solltest du nach den floats den float aufhebe, z.B. über <div style="clear: both;"></div>

    Ansonsten schreib ne Mail...

    Gruß Patrick

    1. Hallo,

      Tipp 1: Problem mit horizontalem margin (macht IE teils doppelt so breit, wie eigentlich deklariert), -> Sternchen-Hack

      Sternchen Hack finde ich nicht ganz unproblematisch in diesem Zusammenhang. Den double-margin-bug kann man IIRC auch mit display:inline; für das gefloatete Element aushebeln, ohne einen * html Hack zu benötigen. Der erscheint mir in Zeiten des IE 7 je nach Doctype riskant zu sein. (aber da kann ich auch irren- nur: wozu ein Risiko eingehen, geht in dem Fall ja auch ohne.)

      netten Tag
      ^da Powl

      --
      ===============================
      powl.hat-gar-keine-homepage.de/
      1. Hi Powl,

        das margin-Problem geht auch über display: inline; zu lösen? Okay, das ist mir neu, man lernt nie aus... Danke.
        Habe den Hack zuletzt vor nem Jahr etwa benutzt, da gabs den noch nicht *gg* Aber mal für Blöde: IIRC?? Ich steh aufm Schlauch...

        1. Hallo,

          Habe den Hack zuletzt vor nem Jahr etwa benutzt, da gabs den noch nicht *gg* Aber mal für Blöde: IIRC?? Ich steh aufm Schlauch...

          If I Remember Correctly -> Wenn ich mich recht erinnere

          netten Tag
          ^da Powl

          --
          ===============================
          powl.hat-gar-keine-homepage.de/
          1. Hallo,

            vielen Dank für die Hinweise (und sorry für die div-Fehler in meinem Beispiel- die habe ich erst beim aufbereiten für hier eingefügt). Die Fehler sind nun behoben, jedes Element, das ich mit float:left formatiert habe, ist auch mit display:inline versehen.
            Trotzdem sieht es immer noch gleich aus wie vorher. Nach einer ersten Bildzeile entsteht ein Leerraum, dessen Grösse wächst, je länger die übergeordneten, gefloateten Elemente sind....

            Falls sich jemand den Code nochmals anschauen mag, wäre ich für weitere Hinweise sehr dankbar.

            (mit dem aufheben der floats bin ich ebenfalls nicht weitergekommen)

            Danke und Gruss

            Adriana

            1. Hallo Adriana,

              Nach einer ersten Bildzeile entsteht ein Leerraum, dessen Grösse wächst, je länger die übergeordneten, gefloateten Elemente sind....

              kannst du das bitte präzisieren? Ich habe mir deine Beispielseite im IE6, IE7, FF1.5, FF2.0 und Opera 9.1 angesehen. Sie ist in allen Browsern nahezu identisch. Screenshot

              Kannst du uns anhand des Screenhots zeigen was du meinst?

              Grüße,

              Jochen

              --
              Kritzeln statt texten:
              Scribbleboard
              1. Hallo Jochen,

                herzlichen Dank für's ausprobieren in den IEs!
                 Mein Problem ist im Mac IE 5.2 aufgetaucht und zu Beginn auch in neueren IEs. Nach den jetzigen Korrekturen habe ich nur noch im Mac IE 5.2 getestet.

                Hier der Screenshot

                Gruss

                Adriana

      2. Hi,

        ohne einen * html Hack zu benötigen. Der erscheint mir in Zeiten des IE 7 je nach Doctype riskant zu sein. (aber da kann ich auch irren-

        Du irrst Dich. Der IE7 fällt auf den Star-HTML-Hack nur noch im quirks mode rein und hier verhält er sich nahezu identisch wie der IE6 - und braucht daher dieselben Korrekturen.

        freundliche Grüße
        Ingo