Stefan: Unterschiedliche Darstellung in IE und Mozilla

Hallo zusammen,

dieses Thema ist in ähnlicher Form hier im Forum u.a. auch von mir schon zur Sprache gekommen. Nichtsdestotrotz stehe ich beim Erstellen von Seiten mit grafischen Elementen, die eine exakte Position benötigen, immer wieder vor dem Problem, dass IE (ab 5.5) und Mozilla die Seiten unterschiedlich darstellen, obwohl der Code DTD HTML 4.01 Transitional genügt. Dieses Problem tritt insbesondere dann auf, wenn Grafiken innerhalb von <div> oder <td> verwendet werden. Außerdem erscheint es mir erwähnenswert, dass ich Schriftarten und Schriftgrößen (in pt) im Stylesheet festlege bzw. festgelegt habe.

Kann mir jemand einen Tipp geben, was alles beachtet werden muss, damit Seiten in IE und Mozilla gleich aussehen, ohne dass eine Browserweiche verwendet werden muss.

Vielen Dank im voraus,
Gruß
Stefan

  1. Moin auch,
     IE 5 kann (im Gegensatz zu IE 6) keine fixed positions. Die zerschießen dann das Bild.
    Workaraound: div[id] benutzen.
    Siehe auch
    http://selfaktuell.teamone.de/tippstricks/css/browserweiche/index.htm

    Gruß von der Ostsee

    Hanjo

    1. Moin!

      IE 5 kann (im Gegensatz zu IE 6) keine fixed positions. Die zerschießen dann das Bild.

      Auch der IE6 kann kein position:fixed. Der Mac-IE 5.1 kann's - dafür versagt der an anderen Stellen, die die Windows-Version beherrscht.

      - Sven Rautenberg

      1. Hi Sven,

        IE 5 kann (im Gegensatz zu IE 6) keine fixed positions. Die zerschießen dann das Bild.

        Auch der IE6 kann kein position:fixed. Der Mac-IE 5.1 kann's

        AFAIK aber auch nur stark eingeschränkt, d.h. es treten dann andere Bugs auf (http://jendryschik.de/wsdev/css/fixed/#implementierung). Deshalb schließt man besser alle M$IEs aus, oder setzt es gleich ganz anders um ;)

        Jedenfalls gibt es auch für M$IE/Mac eine eigene CSS-Weiche, falls diese nötig sein sollte:

        http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html

        LG Orlando

        1. Hi Hanjo, hi Sven, hi Orlando,

          sorry, aber so richtig was anfangen kann ich mit euren Antworten leider nicht. In der ursprünglichen Fragestellung war nicht von einem Problem mit "position: fixed" die Rede. Vielmehr davon, dass ich immer wieder ein Problem damit habe, dass Seiten mit grafischen Elementen, die mittes <div> und/oder <table> positioniert werden, in IE (ab Vers. 5.5) und Mozilla unterschiedlich dargestellt werden.

          Wäre schon, wenn ich noch weiteres Feedback bekomme würde.

          Gruß
          Stefan

          Hi Sven,

          IE 5 kann (im Gegensatz zu IE 6) keine fixed positions. Die zerschießen dann das Bild.

          Auch der IE6 kann kein position:fixed. Der Mac-IE 5.1 kann's

          AFAIK aber auch nur stark eingeschränkt, d.h. es treten dann andere Bugs auf (http://jendryschik.de/wsdev/css/fixed/#implementierung). Deshalb schließt man besser alle M$IEs aus, oder setzt es gleich ganz anders um ;)

          Jedenfalls gibt es auch für M$IE/Mac eine eigene CSS-Weiche, falls diese nötig sein sollte:

          http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html

          LG Orlando

          1. Hi Stefan,

            sorry, aber so richtig was anfangen kann ich mit euren Antworten leider nicht. In der ursprünglichen Fragestellung war nicht von einem Problem mit "position: fixed" die Rede. Vielmehr davon, dass ich immer wieder ein Problem damit habe, dass Seiten mit grafischen Elementen, die mittes <div> und/oder <table> positioniert werden, in IE (ab Vers. 5.5) und Mozilla unterschiedlich dargestellt werden.

            was meinst du denn mit "unterschiedlich"? So kann ich leider nur raten. Wenn es darum geht, dass der M$IE die Breite/Höhe von DIVs bei Verwendung von margin/padding/border falsch berechnet, hast du dir den Box-Model-Bug eingefangen. Der M$IE rechnet bei falschem oder nicht vollständigem Doctype oder vorhandener XML-Deklaration falsch, weil er sich dann nicht im standards-compliant-mode befindet.

            </archiv/2002/10/26502/#m144586>
             http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp
             http://gutfeldt.ch/matthias/articles/doctypeswitch.html
             http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

            Wäre schon, wenn ich noch weiteres Feedback bekomme würde.

            Eine Adresse und eine genauere Fehlerbeschreibung wäre hilfreich.

            LG Orlando

            1. Hi Orlando,

              die Links haben mir teilweise schon geholfen. Vielen Dank!
              In einem konkreten Fall jedoch leider noch nicht.

              Eine Adresse und eine genauere Fehlerbeschreibung wäre hilfreich.

              http://www10.brinkster.com/goorps/test/company.asp

              Inhaltlich ist wenig darauf zu sehen. Die Seiten sind auch noch nicht fertig. Hauptproblem, wie unschwer zu erkennen, ist das Menu. Im IE 6 wird es so dargestellt wie ich es mir vorstelle, in Mozilla 1.0 nicht (Das soll jetzt nicht heißen das der IE besser als Mozilla darstellt.) Die Zeilen geraten aus welchem Grund auch immer im Mozilla breiter als im IE, womit die Position der Navigationsgrafiken nicht mehr stimmt. Woran liegt das? Ich weiß es leider nicht. Ich hoffe, du kannst mir helfen.

              Viele Grüße
              Stefan

              1. Hi Stefan,

                http://www10.brinkster.com/goorps/test/company.asp

                Hauptproblem, wie unschwer zu erkennen, ist das Menu. Im IE 6 wird es so dargestellt wie ich es mir vorstelle, in Mozilla 1.0 nicht

                Hier hat Mozilla Recht.

                (Das soll jetzt nicht heißen das der IE besser als Mozilla darstellt.)

                Ich weiß, es ist umgekehrt ;)

                Die Zeilen geraten aus welchem Grund auch immer im Mozilla breiter als im IE, womit die Position der Navigationsgrafiken nicht mehr stimmt. Woran liegt das?

                Welchen M$IE hast du denn? Du beschreibst nämlich den typischen Box-Model-Bug, der M$IE rechnet die Breite falsch, er stellt das DIV *inklusive* Rahmen, Innen- und Außenabstand mit der definierten Breite dar, richtig wäre es, wenn er sie außen *dazuzählt*. Laut

                http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp

                sollte der M$IE6 deine Seite korrekt (im standards-compliant-mode) darstellen, da du den Doctype inklusive Adresse angegeben hast. Verwendest du den M$IE 5.x? Ich sehe auch keine großen Abweichungen zwischen dem M$IE, Mozilla und Opera, wobei bei letzterem der horizontale blaue Strich unter den Bildern fehlt.

                LG Orlando

                1. Hi Orlando,

                  Welchen M$IE hast du denn? Du beschreibst nämlich den typischen Box-Model-Bug, der M$IE rechnet die Breite falsch, er stellt das DIV *inklusive* Rahmen, Innen- und Außenabstand mit der definierten Breite dar, richtig wäre es, wenn er sie außen *dazuzählt*. Laut

                  http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp

                  sollte der M$IE6 deine Seite korrekt (im standards-compliant-mode) darstellen, da du den Doctype inklusive Adresse angegeben hast. Verwendest du den M$IE 5.x? Ich sehe auch keine großen Abweichungen zwischen dem M$IE, Mozilla und Opera, wobei bei letzterem der horizontale blaue Strich unter den Bildern fehlt.

                  Ich verwende M$IE6 SP1. Der Unterschied der Seitendarstellung liegt v.a. darin, dass der Zeilenabstand des Menus auf der linken Seite, welches eine Tabelle innerhalb eines <DIV> ist, im Mozilla breiter gerät als im IE und es dadurch zu Fehlern bei der Darstellung der vertikalen blauen Linie kommt. Ich denke der Fehler liegt eher in der Tabelle als beim <DIV>.

                  Viele Grüße
                  Stefan

                2. Hi Orlando,

                  habe soeben ein Update von Mozilla 1.0 auf 1.1 durchgeführt,
                  und siehe da: die Seiten werden korrekt dargestellt.

                  Hauptproblem, wie unschwer zu erkennen, ist das Menu. Im IE 6 wird es so dargestellt wie ich es mir vorstelle, in Mozilla 1.0 nicht

                  Hier hat Mozilla Recht.

                  Scheinbar doch nicht?!

                  Auch wenn ich sehr froh bin, dass es nun funktioniert, kannst du mir bitte noch erklären, wo denn das Problem gelegen haben könnte?

                  Viele Grüße
                  Stefan

                  1. Hi Stefan,

                    habe soeben ein Update von Mozilla 1.0 auf 1.1 durchgeführt,
                    und siehe da: die Seiten werden korrekt dargestellt.

                    ach so, dann war doch Mozilla der Schuldige. Ich habe allerdings 1.0 und trotzdem keinen Unterschied zum M$IE.

                    Auch wenn ich sehr froh bin, dass es nun funktioniert, kannst du mir bitte noch erklären, wo denn das Problem gelegen haben könnte?

                    Kann sein, dass dein 1.0-Profil gesponnen hat, das ist eine Schwachstelle, wenn man mehrere Versionen installiert (immer ein eigenes Profil anlegen!).

                    LG Orlando

                    1. Hi Orlando,
                      vielen Dank für deine Hilfe und Mühe!
                      Gruß
                      Stefan

                      Hi Stefan,

                      habe soeben ein Update von Mozilla 1.0 auf 1.1 durchgeführt,
                      und siehe da: die Seiten werden korrekt dargestellt.

                      ach so, dann war doch Mozilla der Schuldige. Ich habe allerdings 1.0 und trotzdem keinen Unterschied zum M$IE.

                      Auch wenn ich sehr froh bin, dass es nun funktioniert, kannst du mir bitte noch erklären, wo denn das Problem gelegen haben könnte?

                      Kann sein, dass dein 1.0-Profil gesponnen hat, das ist eine Schwachstelle, wenn man mehrere Versionen installiert (immer ein eigenes Profil anlegen!).

                      LG Orlando

            2. Hallo,

              was meinst du denn mit "unterschiedlich"? So kann ich leider nur raten. Wenn es darum geht, dass der M$IE die Breite/Höhe von DIVs bei Verwendung von margin/padding/border falsch berechnet, hast du dir den Box-Model-Bug eingefangen. Der M$IE rechnet bei falschem oder nicht vollständigem Doctype oder vorhandener XML-Deklaration falsch, weil er sich dann nicht im standards-compliant-mode befindet.

              um welche IE geht es dabei?

              Anders gefragt, wenn ich per doctype den IE6 "richtiger" einstellen
              kann, hilft das vielleicht noch dem einheitlichen Code für Mozilla,
              aber was ist dann mit IE5 und IE 5.5 ?

              Grüsse

              Cyx23

              1. Hi Cyx23,

                um welche IE geht es dabei?

                um den 6er, selbst mit SP1.

                Anders gefragt, wenn ich per doctype den IE6 "richtiger" einstellen
                kann, hilft das vielleicht noch dem einheitlichen Code für Mozilla,
                aber was ist dann mit IE5 und IE 5.5 ?

                Sollte es Probleme geben ;) hilft entweder "Tantek's Hack" (http://pixels.pixelpark.com/~koch/hide_css_from_browsers/tantek/), oder ein entsprechender Conditional Comment. Besser natürlich, die Seiten werden trotz Box-Model-Bug korrekt dargestellt, das kann man durchaus erreichen. So spart man sich dann die leidige Korrektur der Werte.

                LG Orlando