brainkopp: div problem mit Firefox

Hallo Forumsgemeinde,

bin gerade dabei das Layout einer neuen Seite komplett mit CSS zu definieren und hänge im Moment an einem Problem bei dem ich absolut nicht mehr weiter weiß.

Den momentanen Stand ist unter
breinich.biz/test/
zu sehen.
Das CSS-Sheet dazu unter breinich.biz/test/main.css

Das Problem ist das div "main", welches im Internet Explorer wie von mir gewünscht dargestellt wird. Im Firefox hingegen fängt das div "main" direkt unter dem div "header" an, statt unter dem div "topmenu".

Das sieht man wenn man z.B. im Firefox mit dem Plugin "Web Developer" die Ansicht "Informationen -> Elementinformationen einblenden" aktiviert.
Normalerweise bin ich es ja gewohnt dass es mit dem IE Probleme gibt und nicht mit Firefox. Ausnahmsweise stimmt es diesmal im IE.
Vielleicht ist auch etwas falsch und Firefox zeigt es so an wie er es geliefert kommt :-)

Viellleicht kann mir jmd. helfen, ich bin mit meinem Latein am Ende...

  1. Hallo Forumsgemeinde,

    bin gerade dabei das Layout einer neuen Seite komplett mit CSS zu definieren und hänge im Moment an einem Problem bei dem ich absolut nicht mehr weiter weiß.

    Den momentanen Stand ist unter
    breinich.biz/test/
    zu sehen.

    Ich kann absolut keinen Unterschied in der Darstellung entdecken.
    mfg
    T.

    1. Ich kann absolut keinen Unterschied in der Darstellung entdecken.
      mfg
      T.

      Doch doch, der main-div klebt quasi direkt unterm topmenu, man sieht nicht mal mehr den oberen Rand vom main-div, da er quasi oberhalb des topmenüs liegt, aber wiederrum vom topmenü verdeckt wird (klingt verrückt, ich weiß). Im IE hab ich einen kleinen Abstand zwischen dem langen, waagrechten Strich des Topmenü und dem top-border des main-divs

      Benutzt du evtl. IE7 ? Weil ich schaus mir mit IE6 an...

      1. Doch doch, der main-div klebt quasi direkt unterm topmenu, man sieht nicht mal mehr den oberen Rand vom main-div, da er quasi oberhalb des topmenüs liegt, aber wiederrum vom topmenü verdeckt wird (klingt verrückt, ich weiß). Im IE hab ich einen kleinen Abstand zwischen dem langen, waagrechten Strich des Topmenü und dem top-border des main-divs

        Jetzt seh' ich's auch. War mir erst nicht aufgefallen. Dein CSS mag ich jetzt nicht komplett analysieren, aber da steht desöfteren bei "margin" und "padding" der Wert "0" statt "0px". Letzteres ist aber vorgeschrieben. Also macht's der IE "falsch", weil er das trotzdem interpretiert. Firefox macht es "richtig", weil er das nicht tut.

        mfg
        T.

        1. Hi,

          da steht desöfteren bei "margin" und "padding" der Wert "0" statt "0px". Letzteres ist aber vorgeschrieben.

          nein, 0px sind ebenso groß wie 0em, 0cm, 0pc, 0gd, 0vw oder 0 Buttersemmeln. Deswegen erlaubt das W3C sinnigerweise den Wert "0" als einzigen Längenwert, der ohne Einheit stehen darf.

          Cheatah

          --
          X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
          X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
          X-Will-Answer-Email: No
          X-Please-Search-Archive-First: Absolutely Yes
          1. nein, 0px sind ebenso groß wie 0em, 0cm, 0pc, 0gd, 0vw oder 0 Buttersemmeln. Deswegen erlaubt das W3C sinnigerweise den Wert "0" als einzigen Längenwert, der ohne Einheit stehen darf.

            Sorry. Wußte ich gar nicht. Ist aber ein bißchen inkonsequent, oder?

            Sonst fällt mir nichts besseres ein, als den FF als Grundlage zu nehmen und den IE mit dem StarHack zu beglücken.

            mfg
            T.

            1. nein, 0px sind ebenso groß wie 0em, 0cm, 0pc, 0gd, 0vw oder 0 Buttersemmeln. Deswegen erlaubt das W3C sinnigerweise den Wert "0" als einzigen Längenwert, der ohne Einheit stehen darf.

              Sorry. Wußte ich gar nicht. Ist aber ein bißchen inkonsequent, oder?

              Sonst fällt mir nichts besseres ein, als den FF als Grundlage zu nehmen und den IE mit dem StarHack zu beglücken.

              mfg
              T.

              StarHack? Du meinst CSS-Styles die durch gewisse Syntax nur für IE gelten bzw. den IE auschliessen, gewisse styles zu interpretieren?

              1. StarHack? Du meinst CSS-Styles die durch gewisse Syntax nur für IE gelten bzw. den IE auschliessen, gewisse styles zu interpretieren?

                So isset: http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen

                mfg
                T.

              2. nein, 0px sind ebenso groß wie 0em, 0cm, 0pc, 0gd, 0vw oder 0 Buttersemmeln. Deswegen erlaubt das W3C sinnigerweise den Wert "0" als einzigen Längenwert, der ohne Einheit stehen darf.

                Sorry. Wußte ich gar nicht. Ist aber ein bißchen inkonsequent, oder?

                Sonst fällt mir nichts besseres ein, als den FF als Grundlage zu nehmen und den IE mit dem StarHack zu beglücken.

                mfg
                T.

                Sorry, bin eben erst auf den Trichter gekommen (Firefox = richtige Anzeige, Internet Explorer = falsche Anzeige).

                Wenn ich mich am Firefox orientiere, wie krieg ich dann mein Problem gelöst (sprich dass es so aussieht wie im IE)??? In dem ich den Abstand vom div "main" zum div "header" so erhöhe dass es passt?

                1. Hi,

                  Sorry, bin eben erst auf den Trichter gekommen (Firefox = richtige Anzeige, Internet Explorer = falsche Anzeige).

                  jupp. Diese Annahme erfreut sich übrigens einer erschreckenden Allgemeingültigkeit - die Ausnahmen sind rar gesät.

                  Wenn ich mich am Firefox orientiere, wie krieg ich dann mein Problem gelöst (sprich dass es so aussieht wie im IE)??? In dem ich den Abstand vom div "main" zum div "header" so erhöhe dass es passt?

                  Wenn Dir die entsprechende Höhe und ihr Zustandekommen exakt bekannt sind, wäre das ein Weg - wenn auch ein unbequemer, denke an spätere Anpassungen. Du solltest eher noch einige Zeit der float- und der clear-Eigenschaft widmen.

                  Cheatah

                  --
                  X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
                  X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
                  X-Will-Answer-Email: No
                  X-Please-Search-Archive-First: Absolutely Yes
                  1. »»Du solltest eher noch einige Zeit der float- und der clear-Eigenschaft »»widmen.

                    hiermit passiert ;-)
                    schaut ich nochmal das beispiel auf breinich.biz/test/ an - jetzt sieht's gut aus.

                    Habe dem div "main" statt "display:block" ebenfalls "float:left" auf die Backe gedrückt. Aber ist dass denn der Sinn von CSS? Alle exisitierenden elemente links zu floaten? Ich bin in CSS noch nicht fit, deshalb meine Zweifel ob das so ok ist...

            2. Hi,

              Sorry. Wußte ich gar nicht. Ist aber ein bißchen inkonsequent, oder?

              da will ich eigentlich nicht mal widersprechen, aber: Es ist die _einzige_ Ausnahme, und sie ist IMHO sehr logisch und klar. Insofern denke ich, damit kann man leben.

              Sonst fällt mir nichts besseres ein, als den FF als Grundlage zu nehmen und den IE mit dem StarHack zu beglücken.

              Nach meiner Erfahrung ist das ohnehin die beste Variante, denn "FF als Grundlage zu nehmen" bedeutet nichts anderes als standardkonformen Code zu schreiben. Jeder Client, der sich richtig verhält, wird den Code wie gewünscht nutzen können; die Fehler anderer Clients gehst Du gezielt an, sofern sich das für Dich lohnt.

              Cheatah

              --
              X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
              X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
              X-Will-Answer-Email: No
              X-Please-Search-Archive-First: Absolutely Yes
              1. Hi,

                Sorry. Wußte ich gar nicht. Ist aber ein bißchen inkonsequent, oder?

                da will ich eigentlich nicht mal widersprechen, aber: Es ist die _einzige_ Ausnahme, und sie ist IMHO sehr logisch und klar. Insofern denke ich, damit kann man leben.

                Jedenfalls, wenn man sie kennt... :)

                Nach meiner Erfahrung ist das ohnehin die beste Variante, denn "FF als Grundlage zu nehmen" bedeutet nichts anderes als standardkonformen Code zu schreiben.

                completement d'accord

                mfg
                T.

        2. danke für den Tipp !

          hab jetzt alle Werte von 0 auf 0px geändert, leider ohne Erfolg.
          An was könnte das noch liegen?

  2. Hi,

    Das Problem ist das div "main", welches im Internet Explorer wie von mir gewünscht dargestellt wird.

    ja, es ist hinlänglich bekannt, dass der IE mit Floating nicht umgehen kann.

    Im Firefox hingegen fängt das div "main" direkt unter dem div "header" an, statt unter dem div "topmenu".

    Natürlich. Es gibt ja auch kein Element, das das <div id="main"> an eine andere Stelle rücken könnte. Die Oberkante ist somit an der selben Stelle wie die Deines <div id="topmenu">.

    By the way: Über Deine IDs solltest Du noch mal nachdenken. Das <div id="left"> beschäftigt sich offenbar mit nichts, was "übrig" wäre; und dass es "links" bedeuten soll ist unmöglich, denn das wäre ja schließlich eine darstellungsbezügliche Information, die im HTML-Code nichts verloren hätte.

    Das sieht man wenn man z.B. im Firefox mit dem Plugin "Web Developer" die Ansicht "Informationen -> Elementinformationen einblenden" aktiviert.

    Noch'n Tipp: http://getfirebug.com/

    Normalerweise bin ich es ja gewohnt dass es mit dem IE Probleme gibt und nicht mit Firefox. Ausnahmsweise stimmt es diesmal im IE.

    Nein, tut es nicht.

    Vielleicht ist auch etwas falsch und Firefox zeigt es so an wie er es geliefert kommt :-)

    Aber sicher tut er das :-)

    Viellleicht kann mir jmd. helfen, ich bin mit meinem Latein am Ende...

    Floating entfernt Elemente aus dem Elementfluss. Der IE ignoriert dies oft.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. mit den id-Bezeichnungen haste Recht, hat wirklich nix im html-code zu suchen.Dein Statement
      "Das <div id="left"> beschäftigt sich offenbar mit nichts, was "übrig" wäre" kapier ich leider nicht ganz - mit was soll es sich denn beschäftigen (sorry schonmal dafür wenn die Frage blöd ist)?
      Alternative wäre sowas wie "main-nav" o.ä.,oder?

      Gibt es sonst noch eine Alternative zu meinem Problem??

      1. Hallo,

        Dein Statement "Das <div id="left"> beschäftigt sich offenbar mit nichts, was "übrig" wäre" kapier ich leider nicht ganz

        es ist ganz einfach: Das Wort "left" ist im Englischen das Partizip von "leave", bedeutet also soviel wie "verlassen, zurückgelassen" - oder frei übersetzt einfach "übrig".

        Ciao,
         Martin

        --
        Moskito, ergo summ.
        1. Hallo,

          Dein Statement "Das <div id="left"> beschäftigt sich offenbar mit nichts, was "übrig" wäre" kapier ich leider nicht ganz

          es ist ganz einfach: Das Wort "left" ist im Englischen das Partizip von "leave", bedeutet also soviel wie "verlassen, zurückgelassen" - oder frei übersetzt einfach "übrig".

          Ciao,
          Martin

          Ahhh, jetzt hat's klick gemacht ;-)