Dmitri Rettig: CSS-Problemchen

Hallo,

habe folgenden Quelltext:

<div style="position: relative; margin-left: auto; margin-right: auto; width: 700px;"> Text </div>

Mozilla und Opera zentrieren den Kasten, der IE 6 aber nicht. Woran liegt es? Wie soll ich es MSIE beibringen?

Ich habe einen weiteren Kasten:
<div style="position: relative; margin-left: auto; margin-right: auto; width: 700px;">
<div style="position: fixed; top: 20px; left: 0px; width: 100px;">Kasten</div>
</div>

MSIE unterstützt fixed nicht, aber kann man es irgendwie so erreichen, dass Opera und Mozilla fixed wie fixed behandeln, und der MSIE wie absolute? Ich habe schon so ziemlich alle Verschachtelungsmöglichkeiten ausprobiert - geht nicht ...

Mit freundlichen Grüßen
   Dmitri Rettig--
--------------------------------------
Diejenigen, die immer nur das Mögliche fordern, erreichen gar nichts. Diejenigen, die das Unmögliche fordern, erreichen wenigstens das Mögliche.
  -- M. Bakunin, da Sprüche grad' so inn sind.

  1. Das fixted-Problem habe ich gelöst (Habe einige Endtags vergessen, deswegen gings auch nicht).
    Das Zentrierproblem bleibt immer noch bestehen.

    1. Hallo Dmitri,

      Das Zentrierproblem bleibt immer noch bestehen.

      Vielleicht hilft Dir dieser Artikel:
       http://www.fractatulum.de/fraccss/sample/layout4format.htm

      • Tim
      --
      Diese Signatur ist abgelaufen.
      Bitte besorgen Sie sich eine neue.
      1. Hallo Dmitri, Hallo Tim

        Das Zentrierproblem bleibt immer noch bestehen.

        Vielleicht hilft Dir dieser Artikel:
         http://www.fractatulum.de/fraccss/sample/layout4format.htm

        Naja, ehe man den ganzen Body zentriert und dann jedes einzelne Element wieder "dezentriert", kann man auch einen zusätzlichen div um den zu zentrierenden machen:

        <div style="text-align:center;">
        <div style="position:relative; margin-left:auto; margin-right:auto; width:700px; background-color:#FFFF00;">Text</div>
        </div>

        Gruß

        Axel

        1. Hallo,

          hat alles super geklappt, danke.

          Mit freundlichen Grüßen
             Dmitri Rettig

          --
          --------------------------------------
          Diejenigen, die immer nur das Mögliche fordern, erreichen gar nichts. Diejenigen, die das Unmögliche fordern, erreichen wenigstens das Mögliche.
            -- M. Bakunin, da Sprüche grad' so inn sind.
        2. Hallo Axel,

          Naja, ehe man den ganzen Body zentriert und dann jedes einzelne Element wieder "dezentriert", kann man auch einen zusätzlichen div um den zu zentrierenden machen:

          Klar, aber ich komme mir immer doof vor, wenn ich Elemente ohne jeglichen strukturellen Sinn verwende. ;-)

          • Tim
          --
          Diese Signatur ist abgelaufen.
          Bitte besorgen Sie sich eine neue.
          1. Hallo Axel,

            Klar, aber ich komme mir immer doof vor, wenn ich Elemente ohne jeglichen strukturellen Sinn verwende. ;-)

            Dann muss der "außenrum-div" eben einen Rahmen bekommen. Wenn der Kunde den nicht will, musst Du sagen: "Der Rahmen muss bleiben, sonst geht die gesamte innere Strukur der Seite verloren." Das beeindruckt garantiert. *G*

            Gruß

            Axel

  2. Hallo, Dmitri,

    margin-left: auto; margin-right: auto;

    Mozilla und Opera zentrieren den Kasten, der IE 6 aber nicht. Woran liegt es? Wie soll ich es MSIE beibringen?

    Die Ursache für dieses Problem ist eine andere und somit ist auch Jans verlinkter Artikel falsch.

    Der Internet Explorer 6 versteht sehr wohl das Zentrieren von Blockelementen mit margin-left:auto; und margin-right:auto; - er wendet es jedoch nur im »standards-compliant mode« an, das heißt der Rendermodus, der den W3C-Standards folgt. Dieser Modus wird nur benutzt, wenn die Seite eine vollständige Dokuenttypdeklaration (http://selfhtml.teamone.de/html/allgemein/grundgeruest.htm#dokumenttyp) besitzt (bei Strict-HTML und dem entsprechenden DOCTYPE ist es AFAIK für den MSIE unnötig, dennoch sollte man den DOCTYPE vollständig angeben).

    Wenn beispielsweise auf eine HTML 4.01 Transitional-DTD ohne SYSTEM identifier verwiesen wird, schaltet der MSIE in den Konformitätsmodus:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    Falls der SYSTEM identifier (die URL der DTD) angegeben wird, schaltet er in den standardkonformen Modus:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Da Jans Seite und womöglich dein Dokument eine unvollständige Transitional-Dokumenttypangabe enthalten, funktioniert das Zentrieren nicht. Ein Workaround ist aber (zumindest für IE6) unnötig.
    Auf http://gutfeldt.ch/matthias/articles/doctypeswitch/table.html wird angegeben, welcher Doctypes zu welchem Rendermodus führt (nämlich beim IE Transitional- und Frameset-Doctype ohne SYSTEM identifier).

    Versuche folgendes zur Anschauung:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>murks</title>
    <style type="text/css" media="screen" title="Autorenstylesheet">
    p {width:20em; margin-left:auto; margin-right:auto; padding:1em; text-align:center; font-family:georgia,serif; color:white; background-color:gray;}
    </style>
    </head>
    <body>
    <p>This page is intentionally left blank.</p>
    </body>
    </html>

    Du wirst sehen, dass der Absatz mittig zentriert ist. Jetzt nehme bitte einmal die Dokumenttypdeklaration am Anfang aus dem Dokument heraus, speichere es und schaue dir das Resultat des MSIE 6 an. Na...

    Grüße,
    Mathias

    --
    Mein Leben, ein Leben ist es kaum, / Ich gehe dahin als wie im Traum.
    Wie Schatten huschen die Mensch hin, / Ein Schatten dazwischen ich selber bin.
    Und im Herzen tiefe Müdigkeit - / Alles sagt mir: Es ist Zeit ...
    (Theodor Fontane, Mein Leben)