dSign: em-Breiten in IE und Opera anders als in FFX

Hi,

unter http://congnaix.test.david-muschiol.de/ hab ich mir gerade ein Design gebastelt. Unter Firefox werden alle Breiten (die grundsätzlich in em angegeben sind) korrekt angezeigt, im IE und Opera hingegen ergeben sich Abweichungen zwischen dem Banner und dem Rest. Könnt ihr euch das erklären?

Noch ein Problemchen wäre da: Wenn div#sidebar länger ist als der div#main_content, "verlässt" div#sidebar bereits die weiße Zone (also das Mutterelement div#content). Kann ich da irgendetwas gegen unternehmen?

Kleine Anmerkung: Wundert euch nicht, wenn im IE der Quelltext anders aussieht. Während ich an IE alles als text/html ausliefere und auf die XML-Deklaration verzichte, damit er nicht in den Quirks schaltet, wird die Seite an andere Browser als application/xhtml+xml und mit XML-Deklaration ausgegeben. Auch die Stylesheets werden in Nicht-IE-Browsern per XML statt mit <link />s angegeben.

Wär für paar kleine Tipps sehr dankbar!

dSign

  1. Noch eine kleine Anmerkung bezüglich des Designs. Es sieht ziemlich aus wie "yet another microsoft.com clone". War aber ehrlich nicht meine Absicht. Ich wollte ursprünglich einen Mix aus http://www.lenovo.com/ und http://www.typo3.org/ machen. Irgendwie kam aber plötzlich alles anders, als ich div#head auch mit einem Farbübergang ausstattete ;-)

    1. Hallo.

      Noch eine kleine Anmerkung bezüglich des Designs.

      Eine hätte ich da auch noch: Die Schriftgröße sollte -- nomen est omen -- die Größe einer Schrift beschreiben und nicht deren Winzigkeit.
      MfG, at

  2. Hi,

    alle Breiten (die grundsätzlich in em angegeben sind) korrekt angezeigt,

    genau hier liegt Dein Problem. Du versuchst, Pixel exakt als em auszudrücken, z.B. 64.225em und vergißt zweierlei:
    1. Rundungsunterschiede bei den Browsern
    2. Rundungsunterschiede bei Schriftgradänderung.
    Auch im Firefox paßt es nicht bei allen Schriftgraden exakt.

    Abhilfe ist denkbar einfach: Verzichte auf unnötige Breitenangaben und nutze die Eigenschaft von Block-Elementen, automatisch 100% des verfügbaren Platzes einzunehmen.

    Noch ein Problemchen wäre da: Wenn div#sidebar länger ist als der div#main_content, "verlässt" div#sidebar bereits die weiße Zone (also das Mutterelement div#content). Kann ich da irgendetwas gegen unternehmen?

    Natürlich: ein clearendes Element innerhalb der Elternbox.

    freundliche Grüße
    Ingo

    1. Tach,

      Abhilfe ist denkbar einfach: Verzichte auf unnötige Breitenangaben und nutze die Eigenschaft von Block-Elementen, automatisch 100% des verfügbaren Platzes einzunehmen.

      Du meinst, ich soll alles in ein Mutterelement (z.B. div#frame) packen, dem ich die gewünschte Breite zuweise, also in dem Falle 52.5em (oder so)? Wenn mir nichts anderes übrig bleibt, werde ich das wohl so machen, eigentlich wollte ich aber auf "unnötiges" Markup verzichten... Naja, die Rechnung der Markup-Puristen geht wohl nicht ganz auf ;)

      Natürlich: ein clearendes Element innerhalb der Elternbox.

      Supi, vielen Dank! :-)

      Schönen Montag noch,
      dSign

      1. Hi,

        Du meinst, ich soll alles in ein Mutterelement (z.B. div#frame) packen, dem ich die gewünschte Breite zuweise, also in dem Falle 52.5em (oder so)?

        Ja, das wäre der übliche Weg. Für moderne Browser, die Du ja ohnehin schon gesondert mit x(ht)ml bedienst, könntest Du vermutlich auch body eine Breite geben.

        Apropos xhtml... Validome bemängelt:

        "Das XHTML 1.1-Dokument wurde mit dem MIME-Type "text/html" ausgeliefert, was jedoch nicht empfohlen wird."
        "Es wurde keine Zeichensatzkodierung gefunden. Aus diesem Grund wurde UTF-8 verwendet."

        wenn ein IE UserAgent gesendet wird, bei anderem UA bekommt er das Dokument jedoch als application/xhtml+xml ausgeliefert. Abgesehen davon, daß der UA kein sinnvolles Unterscheidungsmerkmal ist, solltest Du zumindest den gewünchten Zeichensatz serverseitig ausgeben.

        freundliche Grüße
        Ingo

        1. Hi,

          Ja, das wäre der übliche Weg. Für moderne Browser, die Du ja ohnehin schon gesondert mit x(ht)ml bedienst, könntest Du vermutlich auch body eine Breite geben.

          Klingt nach einer interessanten Möglichkeit. Ich werd alles mal probieren, nochmals Danke ^^

          wenn ein IE UserAgent gesendet wird, bei anderem UA bekommt er das Dokument jedoch als application/xhtml+xml ausgeliefert. Abgesehen davon,

          daß der UA kein sinnvolles Unterscheidungsmerkmal ist,...

          Das war leider der einzige Weg den ich finden konnte, oder gibts auch andere Möglichkeiten?

          ... solltest Du zumindest den gewünchten Zeichensatz serverseitig ausgeben.

          Sieht das im HTTP-Header genau so aus wie in der Meta-Angabe, also

          Content-type: text/html; charset=ISO-8859-1

          ?

          Grüße,
          dSign

          1. So ein Mist, hier hab ich mich doch tatsächlich im Namen vertan... Tja so ist das bei multiple identity ;-)

            1. hi,

              So ein Mist, hier hab ich mich doch tatsächlich im Namen vertan... Tja so ist das bei multiple identity ;-)

              Du bist also identisch mit dem Troll "David", der den Thread IE7: Immer noch kein application/xhtml+xml gestartet hat?

              Dann hatten die Leute, die dir dort eine gewisse Ahnungslosigkeit attestiert haben, ja gar nicht mal so unrecht ...

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              1. Hi,

                Du bist also identisch mit dem Troll "David", der den Thread IE7: Immer noch kein application/xhtml+xml gestartet hat?

                Sehr richtig. Hätte man aber auch einfacher herausfinden können. Schreibstil, application/xhtml+xml-Fanatik,... ;)

                Grüße,
                David/dSign

                1. hi,

                  Sehr richtig. Hätte man aber auch einfacher herausfinden können.

                  Das würde ja Interesse an deinem Verbalquark vorrausetzen.

                  gruß,
                  wahsaga

                  --
                  /voodoo.css:
                  #GeorgeWBush { position:absolute; bottom:-6ft; }
                  1. Nabend,

                    Das würde ja Interesse an deinem Verbalquark vorrausetzen.

                    Ja ja, ist ja schon gut, ich geb ja zu dass ich da technisch unfundierten Mist geschrieben hab...

                    Tschöö,
                    dSign

          2. Hallo David.

            Abgesehen davon,
            daß der UA kein sinnvolles Unterscheidungsmerkmal ist,...

            Das war leider der einzige Weg den ich finden konnte, oder gibts auch andere Möglichkeiten?

            Ja, überprüfe den HTTP-Accept-Header.
            Der IE sendet dort standardmäßig „*/*“, was heißt, dass er alles akzeptiert. Da dies aber nicht gleichzeitig das ist, was er auch tatsächlich kann, musst du nur überprüfen, ob in besagtem Header „application/xhtml+xml“ vorkommt.

            Einen schönen Montag noch.

            Gruß, Ashura

            --
            sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
            „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
            [HTML Design Constraints: Logical Markup]
            1. Hallo,

              Ja, überprüfe den HTTP-Accept-Header.
              Der IE sendet dort standardmäßig „*/*“, was heißt, dass er alles akzeptiert. Da dies aber nicht gleichzeitig das ist, was er auch tatsächlich kann, musst du nur überprüfen, ob in besagtem Header „application/xhtml+xml“ vorkommt.

              Hey, das ist ja genial! Dann dürfte ich doch auch mit meinem "Liebling" Lynx wieder meine Seiten betrachten können, nicht wahr? :)

              Einen schönen Montag noch.

              Na, wie solls denn anders sein, bei dieser tollen Lösung ;)

              Vielen Dank, und auch dir noch nen schönen Montag (naja, knappe drei Stunden noch... packen wir den schönen Dienstag noch mit drauf ;)

              dSign

          3. Hi,

            ... solltest Du zumindest den gewünchten Zeichensatz serverseitig ausgeben.

            Sieht das im HTTP-Header genau so aus wie in der Meta-Angabe, also

            Content-type: text/html; charset=ISO-8859-1

            Ja. Hättest Du aber auch schnell selbst herausfinden können, wenn Du Dir den Header dieser Seite angesehen hättest. ;-)

            freundliche Grüße
            Ingo

            1. nAbend,

              Content-type: text/html; charset=ISO-8859-1
              Ja. Hättest Du aber auch schnell selbst herausfinden können, wenn Du Dir den Header dieser Seite angesehen hättest. ;-)

              Oh, hoppla ;) Danke danke danke nochmal...

              Liebe Grüße,
              dSign

      2. Hallo

        Abhilfe ist denkbar einfach: Verzichte auf unnötige Breitenangaben und nutze die Eigenschaft von Block-Elementen, automatisch 100% des verfügbaren Platzes einzunehmen.

        Du meinst, ich soll alles in ein Mutterelement (z.B. div#frame) packen, dem ich die gewünschte Breite zuweise, also in dem Falle 52.5em (oder so)? Wenn mir nichts anderes übrig bleibt, werde ich das wohl so machen, eigentlich wollte ich aber auf "unnötiges" Markup verzichten... Naja, die Rechnung der Markup-Puristen geht wohl nicht ganz auf ;)

        Wieso tut sie das nicht? Der ganze Inhalt steht doch schon in einem solchen (gruppierenden) Element. Außerdem ist "unnötig" eine Frage der Definition. Wenn ich ein Element zum Gruppieren anderer Elemente brauche, ist es nicht mehr unnötig.
        Schluss, Aus, Feierkuchen!

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.1
        1. Hi,

          Schluss, Aus, Feierkuchen!

          Ich ergebe mich ;)

          dSign

          1. Hallo

            Schluss, Aus, Feierkuchen!

            Ich ergebe mich ;)

            Das bezog sich auf "Wenn ich ein Element zum Gruppieren anderer Elemente brauche, ist es nicht mehr unnötig.".

            Tschö, Auge

            --
            Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
            (Victor Hugo)
            Veranstaltungsdatenbank Vdb 0.1
            1. Hallo,

              Das bezog sich auf "Wenn ich ein Element zum Gruppieren anderer Elemente brauche, ist es nicht mehr unnötig.".

              Schon klar :-)

              dSign

    2. Hi nochmal!

      Noch ein Problemchen wäre da: Wenn div#sidebar länger ist als der div#main_content, "verlässt" div#sidebar bereits die weiße Zone (also das Mutterelement div#content). Kann ich da irgendetwas gegen unternehmen?
      Natürlich: ein clearendes Element innerhalb der Elternbox.

      In jedem vernünftigen Browser klappt das wunderbar, nur der IE macht so plötzlich den Inhalt in div#main_content "halb unsichtbar", wenn man aber den Text markiert, ist er plötzlich sichtbar... Total seltsam! Spinne ich oder spinnt IE? Ich hab jetzt schon alles mögliche probiert, mir die Quelltexte 3 mal durchgelesen, aber ich kapier einfach nicht, woran das liegen könnte! Ist das ein bekanntes Problem? Und was kann ich hier tun?

      Wär echt nett wenn ihr mir nochmal einen Tipp geben könntet, denn ich bin absolut ratlos!

      dSign

      PS: Unicode ist genial. Muss ich hier mal so sagen ;-)

      1. Hallo,

        Natürlich: ein clearendes Element innerhalb der Elternbox.
        In jedem vernünftigen Browser klappt das wunderbar, nur der IE macht so plötzlich den Inhalt in div#main_content "halb unsichtbar", wenn man aber den Text markiert, ist er plötzlich sichtbar... Total seltsam!

        *g* So wie hier? http://www.positioniseverything.net/explorer/peekaboo.html

        Spinne ich oder spinnt IE?

        Drei Mal darfst Du raten.

        Wär echt nett wenn ihr mir nochmal einen Tipp geben könntet, denn ich bin absolut ratlos!

        Da stehen drei mögliche Würgarounds.

        Noch ein Tipp: Wenn Du im CSS height nur für den IE angibst (per Conditional Comments z.B.), kannst Du auch einen sehr kleinen Wert, z.B.: height:1%, angeben. Der IE bis 6 rendert das dann wie min-height:1%.

        viele Grüße

        Axel

        1. nAbend,

          In jedem vernünftigen Browser klappt das wunderbar, nur der IE macht so plötzlich den Inhalt in div#main_content "halb unsichtbar", wenn man aber den Text markiert, ist er plötzlich sichtbar... Total seltsam!
          *g* So wie hier? http://www.positioniseverything.net/explorer/peekaboo.html

          Joa, genau so ^^

          Spinne ich oder spinnt IE?
          Drei Mal darfst Du raten.

          Ja ja, der IE, wirklich immer für einen Scherz gut...

          Noch ein Tipp: Wenn Du im CSS height nur für den IE angibst (per Conditional Comments z.B.), kannst Du auch einen sehr kleinen Wert, z.B.: height:1%, angeben. Der IE bis 6 rendert das dann wie min-height:1%.

          So hab ichs jetzt mal gemacht (wie mir ja Ingo auch zeitgleich empfahl :), und wie gesagt, es klappt tatsächlich! Mit Conditional Comments brauche ich mich gar nicht herumzuschlagen, weil ich das ganze eh wie gesagt serverseitig mache :-)

          Ich hab jetzt statt 1% lieber mal 1px genommen, weil bei langen Seiten aus 1% ja auch mal recht viel werden kann. Da spricht doch nix gegen, oder?

          Vielen Dank auch dir!
          dSign

      2. Hi,

        nur der IE macht so plötzlich den Inhalt in div#main_content "halb unsichtbar", wenn man aber den Text markiert, ist er plötzlich sichtbar...

        auch wenn Du die Größe des Browserfemsters veränderst oder scrollst? Dann sollte height oder line-height für den IE helfen.

        freundliche Grüße
        Ingo

        1. Hi,

          es klappt tatsächlich!

          freundliche Grüße

          Das ist ja bei weitem nicht das erste Mal, dass du mir hier hilfst. Und ich weiß echt nicht, was ich ohne deine Hilfe mit der Seite, aber auch mit anderen Seiten gemacht hätte! Ganz ganz lieben Dank für deine Geduld!!!

          Grüße,
          dSign