Onkel Schnitzel: IE ignoriert margin: auto (manchmal)

Moin,

ich habe ein div und ein Element, daß ich mit margin: auto in dem div zentrieren möchte.

.vorschaudiv {
         width: 220px;
         margin-bottom: 25px;
}

.spieltermin {
 position: absolute;
         top: 396px;
         width: 220px;
         margin: auto;
 font: bold 0.9em Arial, Helvetica, sans-serif;
}

Firefox und Opera machen das auch. Nur der IE zickt mal wieder rum. Er rückt den Spieltermin um ungefähr 200px nach rechts. Das seltsame ist, daß das nur im www passiert. Beim Testen auf meinem lokalen Server zentriert er korrekt- es ist die gleiche Datei. Jemand ne Idee?

Schöne Grüße,
Onkel Schnitzel

  1. Hallo Onkel.

    Beim Testen auf meinem lokalen Server zentriert er korrekt- es ist die gleiche Datei. Jemand ne Idee?

    Ist die erste Zeile im Dokument bei deiner lokalen Version mit der der online-Version identisch?

    Einen schönen Montag noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
    Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    1. Ist die erste Zeile im Dokument bei deiner lokalen Version mit der der online-Version identisch?

      Hallo Ashura,

      ich verstehe die Frage ehrlich gesagt nicht ganz. Die Dateien, die ich lokal aufrufe, habe ich auch so hochgeladen. Somit ist auch die erste Zeile identisch.

      Schöne Grüße,
      Onkel Schnitzel

      1. Hallo Onkel Schnitzel.

        ich verstehe die Frage ehrlich gesagt nicht ganz. Die Dateien, die ich lokal aufrufe, habe ich auch so hochgeladen. Somit ist auch die erste Zeile identisch.

        Es ist schon oft genug vorgekommen, dass dies nicht der Fall ist und beim hochladen vom Hoster noch etwas Müll dem Quelltext hinzugefügt wurde.

        Also kann man davon ausgehen, dass du vom IE 6.0 im Standardkonformen Modus sprichst? Browser-Cache schon einmal geleert?

        Einen schönen Montag noch.

        Gruß, Ashura

        --
        Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
        30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
        Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
        [Deshalb frei! - Argumente pro freie Software]
        1. Es ist schon oft genug vorgekommen, dass dies nicht der Fall ist und beim hochladen vom Hoster noch etwas Müll dem Quelltext hinzugefügt wurde.

          Nee, ist alles sauber. Ich hab nen guten Hoster (denke ich)

          Also kann man davon ausgehen, dass du vom IE 6.0 im Standardkonformen Modus sprichst? Browser-Cache schon einmal geleert?

          Moment, Kommando halb zurück. Der Fehler existiert auch lokal (hatte mal wieder nen Brett vorm Kopf- stressiger Tag). Der IE ignoriert also das margin: auto so und so.

          Gruß,
          Onkel Schnitzel

          1. Hallo Onkel Schnitzel.

            Moment, Kommando halb zurück. Der Fehler existiert auch lokal (hatte mal wieder nen Brett vorm Kopf- stressiger Tag). Der IE ignoriert also das margin: auto so und so.

            Also befindet sich der IE entweder im Quirksmodus oder ist < V 6.0.

            Einen schönen Montag noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
            Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
            1. Also befindet sich der IE entweder im Quirksmodus oder ist < V 6.0.

              Der IE ist 6.0 und dann wohl im Quiksmodus (??hab mich damit noch nicht so beschäftigt, ehrlich gesagt) Ist aber eigentlich auch  egals. Die Seite soll auch in IEs <6.0 korrekt angezeigt werden.

              Gruß,
              Onkel Schnitzel

              1. Hallo Onkel Schnitzel.

                Der IE ist 6.0 und dann wohl im Quiksmodus (??hab mich damit noch nicht so beschäftigt, ehrlich gesagt)

                Dann tu es ruhig.

                Ist aber eigentlich auch  egals. Die Seite soll auch in IEs <6.0 korrekt angezeigt werden.

                Und was ist mir standardkonformen Browsern, die das korrekte Verhalten nur mittels margin:auto; an den Tag legen können? (Sofern ihr eigener „Quirksmodus“ nicht dazwischen funkt.)

                Einen schönen Montag noch.

                Gruß, Ashura

                --
                Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                [Deshalb frei! - Argumente pro freie Software]
                1. Dann tu es ruhig.

                  Ich glaube dann bin ich nicht im Quirksmodus.So lautet mein doctype:

                  echo "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN\n".
                         ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n".

                  Ehrlich gesagt, überfordert mich dieses Quirkszeug heute aber extrem. Ist aber auch nicht mein bester Tag (1. Verschlafen und vom Chef aus dem Bett geklingelt. 2.Autoschlüssel im Fahrstuhl fallen gelassen- in den Spalt zwischen Boden und Tür und von dort mehrere Stockwerke abwärts. Zusammen mit dem Hausmeister dann aber wieder befreit. 3. Beim Rasenmähen zuhause barfuss in eine Wespe getreten und schließlich vom Regen überrascht und klatschnass geworden)

                  Gruß,
                  Onkel Schnitzel

                  1. Hallo Onkel Schnitzel.

                    Ich glaube dann bin ich nicht im Quirksmodus.So lautet mein doctype:

                    ~~~php

                    echo "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN\n".

                    ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n".

                      
                    Einmal abgesehen davon, dass das abschließende „;“ fehlt (was macht der „.“ dort?): du bist dir bewusst, was die Ausgabe von `echo "\\n";`{:.language-php} ist?  
                      
                    
                    > Ehrlich gesagt, überfordert mich dieses Quirkszeug heute aber extrem. Ist aber auch nicht mein bester Tag (1. Verschlafen und vom Chef aus dem Bett geklingelt. 2.Autoschlüssel im Fahrstuhl fallen gelassen- in den Spalt zwischen Boden und Tür und von dort mehrere Stockwerke abwärts. Zusammen mit dem Hausmeister dann aber wieder befreit. 3. Beim Rasenmähen zuhause barfuss in eine Wespe getreten und schließlich vom Regen überrascht und klatschnass geworden)  
                      
                    Na, dann kann der Tag ja nur noch besser werden. ;-)  
                      
                      
                    Einen schönen Montag noch.  
                      
                    Gruß, Ashura  
                    
                    -- 
                    Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|  
                    [30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)  
                    Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0  
                    [\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
                    
                    1. ~~~php

                      echo "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN\n".

                      ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n".

                      
                      >   
                      > Einmal abgesehen davon, dass das abschließende „;“ fehlt (was macht der „.“ dort?):  
                        
                      Naja, in der nächsten Zeile geht das echo weiter.  
                        
                        
                      
                      >  du bist dir bewusst, was die Ausgabe von `echo "\\n";`{:.language-php} ist?  
                        
                      Ups, einer zuviel. Was bewirkt das?  
                        
                      Schöne grüße,  
                      Onkel Schnitzel
                      
                      1. Hallo Onkel Schnitzel.

                        Naja, in der nächsten Zeile geht das echo weiter.

                        Beachte meinen Nachtrag.

                        du bist dir bewusst, was die Ausgabe von echo "\\n"; ist?

                        Ups, einer zuviel. Was bewirkt das?

                        echo "\\n";

                        Ausgabe: \n

                        Du maskierst den Backslash, der das „n“ als newline ([Wikipedia: http://en.wikipedia.org/wiki/Line_feed]) kenntlich macht.

                        Einen schönen Montag noch.

                        Gruß, Ashura

                        --
                        Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                        30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                        Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                        [Deshalb frei! - Argumente pro freie Software]
                    2. Hallo.

                      Ich glaube dann bin ich nicht im Quirksmodus.So lautet mein doctype:

                      ~~~php

                      echo "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN\n".

                      ""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">\n".

                        
                      Noch ein kleiner Tipp. Mache es dir nicht so schwer:  
                        
                      `echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\n";`{:.language-php}  
                        
                      Damit ersparst du dir die ganze Maskiererei. (Warum schreibst du den DOCTYPE eigentlich nicht direkt in dein Dokument? Ich frage nur aus Prinzip.)  
                        
                        
                      Einen schönen Montag noch.  
                        
                      Gruß, Ashura  
                      
                      -- 
                      Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|  
                      [30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 21: Toolbars](http://operalover.tntluoma.com/8/day_21_toolbars)  
                      Meine Browser: [Opera 8.01](http://my.opera.com/noctus/affiliate/download/) | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0  
                      [\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
                      
                      1. Noch ein kleiner Tipp. Mache es dir nicht so schwer:

                        echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\n";

                        Aha, mit ' ' kann man also schreiben, ohne diese backslashes? Das werd ich mir morgen nochmal angucken.

                        (Warum schreibst du den DOCTYPE eigentlich nicht direkt in dein Dokument? Ich frage nur aus Prinzip.)

                        Steht so in meiner index-Datei. Ich weiß, es ist Blödsinn, das alles mit echo zu schreiben. Werd ich auch noch ändern.

                        Grüße,
                        Onkel Schnitzel

                        1. Hallo Onkel Schnitzel.

                          Aha, mit ' ' kann man also schreiben, ohne diese backslashes? Das werd ich mir morgen nochmal angucken.

                          Ja. Entweder " '' " oder ' "" '.
                          Bei gleichwertigen Quotes muss wie gewohnt maskiert werden.
                          Zudem werden Steuerungszeichen und Variablen in Doublequotes direkt umgesetzt, was bei Singlequotes nicht der Fall ist.

                          Also:

                          <pre>  
                          [code lang=php]<?php  
                            
                          $foo = "Welt.";  
                            
                          echo "Hallo $foo"; # Ausgabe: Hallo Welt.  
                            
                          echo "Hallo\n$foo"; /* Ausgabe: Hallo  
                          Welt.*/  
                            
                          echo 'Hallo $foo'; # Ausgabe: Hallo $foo  
                            
                          echo 'Hallo\n$foo'; # Ausgabe: Hallo\n$foo  
                            
                          ?>
                          

                          </pre>[/code]

                          Klar? ;-)

                          Einen schönen Dienstag noch.

                          Gruß, Ashura

                          --
                          Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                          30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                          Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                          [Deshalb frei! - Argumente pro freie Software]
                          1. echo 'Hallo\n$foo'; # Ausgabe: Hallo\n$foo

                            Also müßte ich schreiben:

                            echo 'Hallo"\n$foo"';

                            Richtig?

                            Klar? ;-)

                            Ich denke ja. Danke für Deine Hilfe und deine Geduld!

                            Schöne Grüße,
                            Onkel Schnitzel

                            1. Hallo Onkel Schnitzel.

                              Also müßte ich schreiben:

                              echo 'Hallo"\n$foo"';

                              Richtig?

                              Nein, leider nicht.
                              Ausgabe: Hallo"\n$foo"

                              Du müsstest schreiben:

                              echo 'Hallo'."\n$foo";

                              Besserer Stil ist es jedoch, gleich sauber zu schreiben:

                              echo "Hallo\n".$foo;

                              Einen schönen Dienstag noch.

                              Gruß, Ashura

                              --
                              Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
                              30 Days to becoming an Opera8 Lover -- Day 21: Toolbars
                              Meine Browser: Opera 8.01 | Firefox 1.0.6 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
                              [Deshalb frei! - Argumente pro freie Software]
              2. Hallo,

                hab mich damit noch nicht so beschäftigt, ehrlich gesagt

                Solltest Du aber...

                Ist aber eigentlich auch  egals.

                Nein, es ist ganz und gar nicht egal.

                Im Quirks Mode verwenden die Browser überholte, nicht standardkonforme Vorstellungen davon, wie der Code zu interpretieren ist oder korrigieren gar Fehler, die Du in Deinen Code eingebaut hast, anstatt sie wie vorgesehen zu ignorieren. Da dieser Rückfall in die Browsersteinzeit oder diese Fehlerkorrekturen in aktuellen Browsern von Browser zu Browser unterschiedlich ausfallen, sind im Quirks Mode Darstellungsunterschiede zwischen den Browsern vorprogrammiert.

                Im Standards Mode dagegen bemühen sich die aktuellen Browser im Rahmen ihrer Möglichkeiten, so gut es geht standardkonform zu arbeiten, also die beste Voraussetzung, um in den Browsern ähnliche Darstellungen zu erhalten.

                Die Seite soll auch in IEs <6.0 korrekt angezeigt werden.

                Es ist einfacher, eine Standards-Mode-Seite so anzupassen, daß sie auch in alten Browsern gleich aussieht, als umgekehrt eine Quirks-Mode-Seite so anzupassen, daß sie in aktuellen Browsern gleich aussieht.

                Viele Grüße
                Carsten

  2. Hi,

    position: absolute;
             top: 396px;
             width: 220px;
             margin: auto;

    warum kombinierst Du hier absolute Positionierung mit margin? Gebe entweder einen Wert für left an oder verwende statt der absoluten Positionierung margin-top.

    freundliche Grüße
    Ingo

    1. position: absolute;
               top: 396px;
               width: 220px;
               margin: auto;
      warum kombinierst Du hier absolute Positionierung mit margin? Gebe entweder einen Wert für left an oder verwende statt der absoluten Positionierung margin-top.

      Ok, hast erstmal recht- wenn ich nicht absolut positioniere, funktioniert auch margin: auto. Aber ich möchte ja die beiden Elemente übereinander positionieren. Das kriege ich doch ohne absolute Positionierung gar nicht hin, oder? Ich glaub jetzt gibts gleich Mecker. Bin mal gespannt  ;-)

      Grüße,
      Onkel Schnitzel

      1. n-top.

        Ok, hast erstmal recht- wenn ich nicht absolut positioniere, funktioniert auch margin: auto. Aber ich möchte ja die beiden Elemente übereinander positionieren. Das kriege ich doch ohne absolute Positionierung gar nicht hin, oder? Ich glaub jetzt gibts gleich Mecker. Bin mal gespannt  ;-)

        Moment!!! Merks gerade selbst- hab schon wieder Mist geschreiben. Meld mich gleich nochmal- muß was ausprobieren. Auweia Auweia....

        1. Okay, ich habs jetzt hinbekommen. Ich hatte in dem div auch noch ein Bild, das vergaß ich zu erwähnen. Der Text und das Bild sollten in dem div übereinander dargestellt werden. Und bei einem Bild geht das ja nur mit absoluter Positionierung (wenn ich mich jetzt nicht schon wieder täusche).

          Also hab ich das Bild jetzt einfach als Hintergrund für das div eingesetzt. Das Problem war auch, daß die Bild-URL dynamisch erzeugt wird, die style-Anweisungen aber alle in einer css-Datei liegen und das fand ich gut so. Leider kann man aber in einer css-Datei kein php einbinden (richtig?). Also hab ich nun das background-image direkt als style-Attribut in meine Datei geschrieben und jetzt gehts.

          Vielen Dank für Eure Hilfe,
          Onkel Schnitzel

          1. Hi,

            Der Text und das Bild sollten in dem div übereinander dargestellt werden. Und bei einem Bild geht das ja nur mit absoluter Positionierung (wenn ich mich jetzt nicht schon wieder täusche).

            Das hat mit einem Bild nichts zu tun. Überlagerugen erreichst Du enntweder durch absolute oder relative Positionierung, wobei bei letzterer unerwünschtr Leerraum erzeugt werden kann.

            Also hab ich das Bild jetzt einfach als Hintergrund für das div eingesetzt.

            Sicherlich die beste Idee.

            Leider kann man aber in einer css-Datei kein php einbinden (richtig?).

            nein. Allerdings ist es auch wenig sinnvoll, eine CSS-Datei dynamisch zu ändern, da sie dann ständig neu geladen werden müßte.

            Also hab ich nun das background-image direkt als style-Attribut in meine Datei geschrieben

            Sofern Du ohnehin einen <style>-Bereich in der Seite hast, hättest Du dort auch Deine individuelle Definition unterbringen können - Übrigens der beste Platz für dynamische generiertes CSS.

            freundliche Grüße
            Ingo

            1. Allerdings ist es auch wenig sinnvoll, eine CSS-Datei dynamisch zu ändern, da sie dann ständig neu geladen werden müßte.

              Stimmt.

              Sofern Du ohnehin einen <style>-Bereich in der Seite hast, hättest Du dort auch Deine individuelle Definition unterbringen können - Übrigens der beste Platz für dynamische generiertes CSS.

              Stylebereich? Naja, ich habs direkt als style-Attribut dazugeschrieben:

              echo  "<div style="background-image: url(".$auslesen['bild'].")" class="vorschaudiv">\n".
                        //"<img src="".$auslesen['bild']."" width="220px" alt="$spiel" />\n".
                        "<p class="paarung">".$spiel."</p>\n".
                        "<p class="termin">".$auslesen['termin']."</p>\n".
                      "</div>\n";

              Grüße,
              Onkel Schnitzel

            2. hi,

              Das hat mit einem Bild nichts zu tun. Überlagerugen erreichst Du enntweder durch absolute oder relative Positionierung,

              negative margins finde ich für solche zwecke manchmal auch ganz nett.

              wobei bei letzterer unerwünschtr Leerraum erzeugt werden kann.

              die entfallen bei der margin-geschichte.

              gruß,
              wahsaga

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