MatzeA: Abenteuerliche Safari Probleme -> Anzeige probleme.

Servus Folks,

vor kurzem habe ich ja schon ein enig CSS Probleme gehabt.
Soweit so gut. Was Opera 6 / 7 IE 5.5 und 6 sowie Netscape 7 betrifft, habe ich meine Darstellungswünsche gebacken bekommen.

Folgender HTML Code wird jedoch im Safari nicht richtig interpretiert.

Der Text in H1 und H2 wird nicht linksbündig sondern zentriert dargestellt.

Vieleicht fällt einem von euch ein workaround dazu ein.

Gruss Matze

<html xmlns="http://www.w3.org/1999/html">

<head>
<title>Partypage</title>
<base target="_self">
<style type="text/css">
<!--
 body { text-decoration:none; color:#12295A;  margin-left: 15px; margin-top: 10px; background-image: url(images/bg_main.jpg);    }
 table { border: 2px; border-color:#E5EAF6; border-collapse: collapse}
 h1 {background-color: #E5EAF6; width: 550px; text-align: left; }
 h2 {background-color: #12295A; width: 550px; color: #E5EAF6; text-align: left; }
 a:link { text-decoration:underlined; font-weight:bold; color:#12295A; }
 a:visited { text-decoration:underlined; font-weight:bold; color:#12295A; }
 a:hover { text-decoration:underlined; font-weight:bold; background-color:#E5EAF6; }
 a:active { text-decoration:underlined; font-weight:bold; background-color:#7992C9; }
-->
</style>
</head>

<body>

<h1>Aktuelle Termine und Veranstaltungen. </h1>
<h2>31.12.03 ~ 02.01.04 <br>Silvesterparty in der Bude.</h2>
<p> Demnächst mehr.</p>
</body>

</html>

  1. Hallo.

    Folgender HTML Code wird jedoch im Safari nicht richtig interpretiert.

    [...]

    Vieleicht fällt einem von euch ein workaround dazu ein.

    Valider Code wäre ein Anfang.
    MfG, at

    1. Servus,

      Valider Code wäre ein Anfang.

      Falls Du damit die Target Angabe meinst, es handelt sich um eine Frameseite.
      Oder was war da noch nicht ok?!?

      Gruss Matze

      1. Hallo.

        Falls Du damit die Target Angabe meinst, es handelt sich um eine Frameseite.

        Und wo gibst du das an? ...

        Oder was war da noch nicht ok?!?

        ... Richtig, ganz oben als Doctype-Deklaration.
        MfG, at

        1. Servus,

          nun sieht es so aus und geht immer noch nicht....

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//DE"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml" lang="de" >

          <head>
          <title>Party Homepage</title>
          <style type="text/css">
          <!--
           body { text-decoration:none; color:#12295A;  margin-left: 15px; margin-top: 10px; background-image: url(images/bg_main.jpg);    }
           table { border: 2px; border-color:#E5EAF6; border-collapse: collapse}
           h1 {background-color: #E5EAF6; width: 550px; text-align: left; }
           h2 {background-color: #12295A; width: 550px; color: #E5EAF6; text-align: left; }
           a:link { text-decoration:underlined; font-weight:bold; color:#12295A; }
           a:visited { text-decoration:underlined; font-weight:bold; color:#12295A; }
           a:hover { text-decoration:underlined; font-weight:bold; background-color:#E5EAF6; }
           a:active { text-decoration:underlined; font-weight:bold; background-color:#7992C9; }
          -->
          </style>
          </head>

          <body>

          <h1>Aktuelle Termine und Veranstaltungen. </h1>
          <h2>31.12.03 ~ 02.01.04 Silvesterparty in der Bude.</h2>
          <p> Demnächst mehr.</p>
          </body>

          </html>

          Der Validator meldet ebenfalls keine Fehler mehr.

          Gruss Matze

          1. Hi,

            Der Validator meldet ebenfalls keine Fehler mehr.

            der CSS-Validator sollte aber Fehler melden (die Du schon in deinem letzten Thread drin hattest).

            Aber mal 'ne Frage: setzt der Safari die Überschrift (also den gefärbten Bereich) in die Mitte oder nur den Text in die Mitte des gefärbten Bereiches?

            freundliche Grüße
            Ingo

            1. Servus,

              der Hinterrund incl. Text wird nur beim safari zentriert angezeigt.
              Irgendwie werde ich nicht schlau.
              Der Validator sagt immer noch nix.
              Was soll da nun falsch sein?!?

              Gruss Matze

  2. Servus,

    nun sagt der Validator vom w3c This Page is Valid XHTML 1.0 Strict.
    Aber das Erbeniss ist immer noch das gleiche!

    <?xml version="1.0" encoding="iso-8859-1"?>
    <!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">

    <head>
    <title>Termine</title>
    <style type="text/css">
    <!--
     body { text-decoration:none; color:#12295A;  margin-left: 15px; margin-top: 10px; background-image: url(images/bg_main.jpg);    }
     h1 {background-color: #E5EAF6; width: 550px; text-align: left; }
     h2 {background-color: #12295A; width: 550px; color: #E5EAF6; text-align: left; }
     -->
    </style>
    </head>
    <body>
    <h1>Aktuelle Termine und Veranstaltungen. </h1>
    <h2>31.12.03 ~ 02.01.04 Silvesterparty in der Bude.</h2>
    <p> Demnächst mehr.</p>
    </body>

    </html>

    Herje nochmals spinnt der Validator ich oder der Safari?!?

    Gruss Matze

    1. Hallo Matze,

      mir kommt da so eine Idee:

      Überschriften sind doch Blockelemente, diese werden nicht mittels "text-align" sondern über "margin" positioniert. Wenn der Safari diese zentriert, bedeutet das doch, dass das Standard-CSS ein "margin-left:auto" enthalten muss.

      Also versuchs doch einmal mit "margin-left:0; margin-right:auto".

      MFG
      Detlef

      --
      - Wissen ist gut
      - Können ist besser
      - aber das Beste und Interessanteste ist der Weg dahin!
      1. Servus,

        mir kommt da so eine Idee:

        Deine Idee war gut.
        Habe nun folgenden Style Definition eingefügt und es klappt.

        <!--
         body { text-decoration:none; color:#12295A;  margin-left: 15px; margin-top: 10px; margin-right: auto; background-image: url(images/bg_main.jpg);    }
         h1 {background-color: #E5EAF6; width: 550px; text-align: left; margin-left: 0px; }
         h2 {background-color: #12295A; width: 550px; color: #E5EAF6; text-align: left; margin-left: 0px; }

        Vielen Dank Gruss Matze

        1. Hallo Matze,

          womit wir ein sehr praktisches Beispiel dafür haben, dass man sich absolut auf keine Standardeinstellung irgendwelcher Browsers verlassen darf.

          MFG
          Detlef

          --
          - Wissen ist gut
          - Können ist besser
          - aber das Beste und Interessanteste ist der Weg dahin!