juewi: DOCTYPES / CSS-Hacks / QUIRKS - Durchblick fehlt

Hallo!

HIER hab ich mit folgendem <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> geschafft, die Deckkraft von Grafiken mit filter.opacity zu regelen, wofür unbedingt dieser Docwrite (ist DAS ein CSS-Hack?) erforderlich ist.

(Bitte nicht auf Farben und Rahmen achten - ist nur für die Testphase)

Nun gings weiter und ich wollte mit spezieller Methode - danke Patrick Andrieu - ein div im div vertikal zentrieren.

Funktioniert hervorragend in FF, Opera, Safari. Wo nicht? Natürlich in IE ...
Grund: obiger Docwrite bzw. halt dieser Teil "http://www.w3.org/TR/html4/strict.dtd" verhindert das Funktionieren der Zentrierung mit CSS.

Nun meine Frage: Gibt´s da eine Lösung oder muss ich nun (meine hart erarbeitete) Deckkraft-Regelung für IE in den Wind schiessen damit ich die korrekte Zentrierung in IE bekomme?

Also IE muss ja der Sargnagel für dieses Business sein ;-(

DAnke euch, Jürgen

  1. Hallo juewi!

    HIER hab ich mit folgendem <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> geschafft, die Deckkraft von Grafiken mit filter.opacity zu regelen, wofür unbedingt dieser Docwrite (ist DAS ein CSS-Hack?) erforderlich ist.

    Es heißt DOCTYPE und nicht Docwrite ;)

    DOCTYPE ist eine Abkürzung für »<http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Document Type Deklaration>«. Sie ist notwendig, um den Browser anzuweisen, nach welchem Standard dieser das Dokument darstellen soll. Dazu bedient er sich einer DTD (»Document Type Definition«), deren URL in der Regel im DOCTYPE mit angegeben wird. Bei deinem Beispiel also ist sie hier zu finden: http://www.w3.org/TR/html4/strict.dtd und das ist die DTD für HTML 4.01 strict.

    Ein CSS-Hack hingegen nutzt Fehlinterpretationen des einen bestimmten oder des anderen bestimmten Browsers, um ihm bestimmte Regel aufzuzwingen, die andere Browser nicht brauchen, da sie sich an die Standard-Interpretation halten (CSS-Browserweichen).

    Nun meine Frage: Gibt´s da eine Lösung oder muss ich nun (meine hart erarbeitete) Deckkraft-Regelung für IE in den Wind schiessen damit ich die korrekte Zentrierung in IE bekomme?

    Du wirst wahrscheinlich mehrere »Hacks« brauchen. Den Doctype »strict« würde ich auf jeden Fall versuchen, beizubehalten.

    Also IE muss ja der Sargnagel für dieses Business sein ;-(

    Wieso, der verschafft doch erst richtig Arbeit (ob man sie einem Kunde berechnen sollte, steht auf einem anderen Blatt) ;)

    Viele Grüße aus Frankfurt/Main,
    Patrick

    --
    _ - jenseits vom delirium - _

       Diblom   [link:hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash]
    J'ai 10 ans! | Achtung Agentur! | Nichts ist unmöglich? Doch! | Heute schon gegökt?
    1. »» ... dieser Docwrite ...

      Es heißt DOCTYPE und nicht Docwrite ;)

      Ups. Im Büro arbeite ich mit einem Programm Docwrite - soll nicht mehr vorkommen ;-)

      Danke mal für die kurze Einführung in Hacks und Doctypes.

      Du wirst wahrscheinlich mehrere »Hacks« brauchen. Den Doctype »strict« würde ich auf jeden Fall versuchen, beizubehalten.

      Ich hab mittlerweile das Galerie-Script gottseidank geschafft, so umzucodieren, dass die "div"-Komponenten nun "td"-Komponenten sind und ich die Bildanzeige somit in einer Tabellenzelle mache, in der das Zentrieren ja bekanntlich ETWAS leichter zu bewerkstelligen ist ;-)

      Danke und LG, Jürgen

      PS: Kann jemand die Seite direkt über IE6 und/oder 5.5 (noch notwendig?) testen ob bei Überfahren der Thumbnails diese alle zentriert dargestellt werden?

  2. Bleib bei Strict. Das Problem dieser Lösung ist nicht, dass sie im IE nicht funktioniert - sondern die problematische Weise, wie mit dem Attributselektor versucht wird, CSS-Eigenschaften für den IE zu vergeben und dann für andere Browser wieder zu übeschreiben. Der Autor hat einfach nicht erkannt, dass der IE 7 den Attributselektor, jedoch noch nicht display:table/table-cell kennt. Damit geht sein Konzept des Überschreibens für Browser, die das sehr wohl können, nicht mehr auf. Der Ansatz zur vertikalen Zentrierung funktioniert aber auch im IE 7, auch im standardkonformen Modus.

    Lösung:
    Schreibe ein Stylesheet für standardkonforme Browser. Schreibe ein Stylesheet für den IE und binde es mit <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> ein.

    <style type="text/css">
    #outer { height: 400px; overflow: hidden; }
    #outer { display: table; }
    #middle { display: table-cell; vertical-align: middle; }
    </style>

    <!--[if lt IE 8]>
    <style type="text/css">
    #outer { position: relative; }
    #middle { position: absolute; top: 50%;}
    #inner { position: relative; top: -50%}
    </style>
    <![endif]-->

    Mathias

    1. Bleib bei Strict.

      Hab schon bemerkt, dass dies sehr empfohlen wird - halt mich auch dran.

      Lösung:
      Schreibe ein Stylesheet für standardkonforme Browser. Schreibe ein Stylesheet für den IE und binde es mit <http://de.selfhtml.org/css/layouts/browserweichen.htm#alternative@title=Conditional Comments> ein.

      <style type="text/css">
      #outer { height: 400px; overflow: hidden; }
      #outer { display: table; }
      #middle { display: table-cell; vertical-align: middle; }
      </style>

      <!--[if lt IE 8]>
      <style type="text/css">
      #outer { position: relative; }
      #middle { position: absolute; top: 50%;}
      #inner { position: relative; top: -50%}
      </style>
      <![endif]-->

      Mathias

      Danke vielmals für das Codebeispiel, aber wie oben geschrieben hab ich´s geschafft, die Bildanzeige in eine Tabellenzelle zu packen womit Hacks etc. überflüssig werden. Auch IE8 wird dabei kein Problem haben hoff ich ;-)

      Da mich aber interessiert, ob Deine (im Vergleich simple) Variante funktioniert werd ich die interessehalber sicher ausprobieren!

      Danke und LG, Jürgen

      PS: Kann jemand die Seite direkt über IE6 und/oder 5.5 (noch notwendig?) testen ob bei Überfahren der Thumbnails diese alle zentriert dargestellt werden?