Sensei: Problem mit clear:...

Hallo!

Ich bin gerade am erstellen einer privaten Website: http://minis.reich-rohrwig.net/about_gls.htm

Hier könnt ihr auch schon das Problem sehen. Der div-container im content-bereich (Elisabeth) wird genau soviel verlängert, dass er mit dem linken (blauen) submnü-div gecleared wird.

Wenn ich ein clear:left hineingebe (ins div, welches Elisabeth kapselt, id "glbox"), dann verschiebt sich das gesamte div unter das blaue menüfeld...

Kann mir jemand helfen? Wie löse ich das Problem (welches ich schon seit Tagen mit mir rumschleppe...)? ;-)

Danke, lg aus Wien, Sensei

  1. Hallo!

    Sorry, hatte meinen Link nicht als Link erstellt, hier ist er:
    http://minis.reich-rohrwig.net/about_gls.htm

    Danke, cu

  2. Hi,

    Hier könnt ihr auch schon das Problem sehen.

    kommt auf den Browser an...

    Zunächst ein kleiner Lesetip: http://www.1ngo.de/web/clear.html.

    In Deinem Fall würde ich innerhalb der "glbox" nicht mit float und clear arbeiten. Der Text soll doch vermutlich gar nicht um die Bilder fließen, also kannst Du die Bilder auch absolute positionieren.

    freundliche Grüße
    Ingo

    1. Hallo!

      Danke für den Hinweis und deine interessante Website! Allerdings hat sich das Problem nicht gelöst, sieht mal nochmal nach auf der Seite. Ich habe jetzt von den Bildern das float rausgelöscht und stattdessen ein position:absolute eingesetzt.

      Die erste Box wird allerdings immer noch "unter die Navi" gedehnt, bei der zweiten tritt ein neues Problem auf: Das Bild ragt über die Box hinaus :(

      Übrigens: Ich sehe mir das alles übrigens im Firefox 1.0.7 an, im IE 6.0 siehts aber fast noch schlimmer aus :(

      Danke für deine Hilfe, Sensei

      1. Hi,

        Danke für den Hinweis und deine interessante Website! Allerdings hat sich das Problem nicht gelöst, sieht mal nochmal nach auf der Seite. Ich habe jetzt von den Bildern das float rausgelöscht und stattdessen ein position:absolute eingesetzt.

        Und vergessen die unsinnigen BRs mit dem clear rauszunehmen. ;-)

        bei der zweiten tritt ein neues Problem auf: Das Bild ragt über die Box hinaus :(

        Dagegen hilft min-height (und für den IE<7 height).

        freundliche Grüße
        Ingo

        1. Achja, danke, das hatte ich tatsächlich vergessen (die br-s).
          Gut, habe sie jetzt entfernt und die Klasse glbox um die Attribute height und min-height erweitert. Sie sieht jetzt so aus:

          div.glbox { border:1px solid #292; background-color:#cfc; padding:5px;position:relative;width:99%;margin-bottom:10px;min-height:150px;height:150px;}

          Im Firefox sieht jetzt alles supoer aus :-) Genauso wie ich es wollte :-)

          Im IE 6.0 allerdings ist es ein graus: Die glbox-en beginnen erst unterhalb der subnavi und das mit der Höhe scheint auch nicht zu klappen.

          Ich hoffe du kannst mir nocheinmal helfen :-)

          Vielen Dank, lg, Sensei

          1. Hi,

            Gut, habe sie jetzt entfernt und die Klasse glbox um die Attribute height und min-height erweitert. Sie sieht jetzt so aus:

            div.glbox { border:1px solid #292; background-color:#cfc; padding:5px;position:relative;width:99%;margin-bottom:10px;min-height:150px;height:150px;}

            so hatte ich das nicht gemeint, sondern _für den IE_ height.

            In Deinem CSS habe ich auch
            div#contentB div, a, td, span, p, li { height:1%; }
            gefunden - sollte das nicht ebenfalls ausschließlich für den IE bestimmt sein?

            Im IE 6.0 allerdings ist es ein graus: Die glbox-en beginnen erst unterhalb der subnavi und das mit der Höhe scheint auch nicht zu klappen.

            Logisch - der IE hat Probleme mit sich überlappenden Boxen. Warum floatest Du den linken Container auch nicht?

            freundliche Grüße
            Ingo

            1. Soll heißen du meinst ich soll es mit so einem "Hack" machen, den nur der IE interpretiert? Dann werde ich das mal versuchen...!

              Was meinst du mit "Warum floatest du den linken Container nicht"? Meinst du ich soll den blauen Container für die Subnavi umlaufen lassen? Das will ich eigentlich nicht unbedingt (rein vom Design her). Allerdings könnte ichs mir ja mal überlegen (sollte aber auf das "Problem" mit dem ich kämpfe keinen Einfluss haben, oder?).

              Danke vielmals, Sensei

              1. Hi,

                Was meinst du mit "Warum floatest du den linken Container nicht"?

                sorry, der floatet ja schon - bei den (zu) vielen DIVs kann man schonmal durcheinander kommen.

                Was mir gerade beim IE aufgefallen ist: hier kommt ein minimaler horizontaler Scrollbalken, d.h. die Breiten passen nicht ganz.

                freundliche Grüße
                Ingo

                1. Hi!

                  Was mir gerade beim IE aufgefallen ist: hier kommt ein minimaler horizontaler Scrollbalken, d.h. die Breiten passen nicht ganz.

                  Diesen minimalen Scrollbalken sehe ich eher als den bekannten horizontalen-Scrollbalken-Bug des IE an, meinst du nicht?

                  Wegen vorhin: Also meinst du das so, dass ich so einen *-Hack o.ä. machen soll, damit height nur von dn IE Browsern interpretiert wird oder so...
                  Hab sowas noch nie gemacht deswegen bin ich da etwas unsicher.

                  cu

                  1. Hi,

                    Was mir gerade beim IE aufgefallen ist: hier kommt ein minimaler horizontaler Scrollbalken, d.h. die Breiten passen nicht ganz.

                    Diesen minimalen Scrollbalken sehe ich eher als den bekannten horizontalen-Scrollbalken-Bug des IE an, meinst du nicht?

                    Nein. Dieser Fehler betrifft Frames.

                    Wegen vorhin: Also meinst du das so, dass ich so einen *-Hack o.ä. machen soll, damit height nur von dn IE Browsern interpretiert wird oder so...
                    Hab sowas noch nie gemacht deswegen bin ich da etwas unsicher.

                    Ja genau. * html #id{} wäre ein hierfür passender Hack.

                    freundliche Grüße
                    Ingo