Karl-Heinz: Standardeinstellungen in CSS?

Hallo,
wie kann ich mir im IE, im FF und in Opera die Standardeinstellungen (margin,padding.font etc.) der tags (h1, h2, ...p, div, etc.)
anzeigen lassen?
Danke
K-H

  1. Hallo,
    wie kann ich mir im IE, im FF und in Opera die Standardeinstellungen (margin,padding.font etc.) der tags (h1, h2, ...p, div, etc.)
    anzeigen lassen?

    IE: Entwicklertools
    Firefox: FireBug
    Opera: Dragonfly

    1. Hallo,

      IE: Entwicklertools
      Firefox: FireBug
      Opera: Dragonfly

      Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

      Vielleicht stelle ich besser noch die Zusatzfrage:
      Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?
      Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

      1. Hi,

        IE: Entwicklertools
        Firefox: FireBug
        Opera: Dragonfly
        Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

        Firebug für FF ist ein Add-On, bei IE und Opera sind die erwähnten Tools inclusive.

        Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?

        Validen, also standardkonformen Code schreiben. Der erzeugt in aktuellen Browsern schon mal weitgehend vergleichbare Ergebnisse. Kleine Darstellungsunterschiede in den einzelnen Browsern einfach akzeptieren; größere, nicht hinnehmbare Unterschiede mit Hacks für bestimmte Browser gezielt angehen.
        Erfordert natürlich, dass man das Werk auch regelmäßig in mehreren Browsern testet.

        Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

        Nein. Als Faustregel kann aber gelten: Alle Darstellungs-Eigenschaften, die dir als Autor wichtig sind, solltest du explizit angeben. Alle Angaben, die du weglässt, überlässt du dem Browser als Freiheitsgrad - sei es bewusst oder versehentlich. Setze die Defaulteinstellungen deiner Testbrowser auf möglichst abenteuerliche Werte, damit dir sofort auffällt, wenn irgendwo der Browser-Default wirksam wird. Zum Beispiel orangefarbener Hintergrund oder eine auffällige Schriftart.

        So long,
         Martin

        --
        Wenn alle das täten, wass sie mich können,
        käme ich gar nicht mehr zum Sitzen.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
      2. Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?
        Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

        Es gibt die Praxis, für wenige Elemente Standardisierungen vorzunehmen:
        http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

        inline-replaced Elemente wie Formular-Felder sollte man besser nicht normalisieren.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?
          Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

          Es gibt die Praxis, für wenige Elemente Standardisierungen vorzunehmen:
          http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

          Du bezeichnest es als guten Stil li-Elemente auf "block" zu normalisieren?

          Ich hab z.B. für das allgemeine Schriftbild folgendes im Einsatz - das führt zu einem sauberen Ergebnis in IE6 aufwärts sowie in anderen Browsern:

          Besonders die margins nach unten sind imho wichtig, mache browser haben z.B. bei p-Elementen unterschiedliche Auffassungen: oben und unten, nur unten usw. Wenn man bei "absatzbildenden Elementen" einheitliche Außenabstände nach unten definiert, bekommt man kaum Probleme. Die einzige ausnahme Stellen umrahmte Bereiche dar, deren padding kleiner ist, als der untere Außenabstand dieser Elemente - das muss man halt dann mit einem section *:last-child { margin-bottom: 0; } oder ähnlichem fixen. Auf IE6 und 7 wird "gschissn" :p

            
          p,  
          ul,  
          ol,  
          dl,  
          blockquote,  
          address {  
          	padding: 0;  
          	margin: 0 0 1.5em 0;  
          }  
            
          ul ul,  
          ul ol,  
          ul dl,  
          ol ul,  
          ol ol,  
          ol dl,  
          dl ul,  
          dl ol,  
          dl dl {  
          	margin-bottom: 0;  
          }  
            
          ol {  
          	margin-left: 2em;  
          }  
            
          ul {  
          	list-style: none;  
          	margin-left: 0.5em;  
          }  
            
          dt,  
          dd,  
          li {  
          	padding: 0;  
          	margin: 0;  
          }  
            
          ul li {  
          	background: url(../img/li.png) no-repeat left .1em;  
          	padding-left: 1.5em;  
          }  
            
          dt {  
          	font-weight: bold;  
          }  
            
          dd {  
          	margin-left: 2em;  
          }  
            
          blockquote {  
          	font-style: italic;  
          	padding-left: 2em;  
          }  
          
          
          1. Es gibt die Praxis, für wenige Elemente Standardisierungen vorzunehmen:
            http://wiki.selfhtml.org/wiki/Doku:CSS/Anwendung_und_Praxis/Guter_CSS-Stil#Normalisierung

            Du bezeichnest es als guten Stil li-Elemente auf "block" zu normalisieren?

            Nein, das kann man wahlich nicht als guten Stil bezeichnen und das wird auch korrigiert!

            mfg Beat

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            Der Valigator leibt diese Fische
      3. Hi,

        IE: Entwicklertools
        Firefox: FireBug
        Opera: Dragonfly
        Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

        Aber Google bedienen kriegst du hin?

        Vielleicht stelle ich besser noch die Zusatzfrage:
        Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?

        In dem man einfach zu allen CSS-Eigenschaften, die einem wichtig sind, explizite Angaben macht.

        Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

        Stichwort: Reset-CSS.
        (Bitte auch über die Kritikpunkte an diesem Vorgehen informieren.)

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
      4. Hallo,

        IE: Entwicklertools
        Firefox: FireBug
        Opera: Dragonfly
        Sind dies jeweils add-ons (sorry aber ich bin noch kein HTML-Experte)?

        Die Entwicklertools sind Bestandteil des Internet Explorer ab Version 8, also keine Erweiterung.

        FireBug ist eine Erweiterung

        Opera ist "beides", einerseits benötigt man dafür das Debugmenü deren Kernfunktionalitäten bereits integriert sind, aber nur nicht sichtbar. Andererseits werden die Quelldaten direkt Online bereitgestellt.

        Vielleicht stelle ich besser noch die Zusatzfrage:
        Wie (falls überhaupt) kriegt Ihr es hin, dass HTML-Seiten in den gängigen Browsern etwag gleich aussehen?

        HTML-Dokumente ohne CSS müssen nicht gleich aussehen, das war nie so vorgesehen und wird vermutlich auch nie so sein.

        Gibt es vielleicht eine empfohlene Standard-CSS, die dann dies einigermaßen bewerkstelligt?

        Von welchen Darstellungsabweichungen reden wir? Ist das Kerning der Schrift etwas anders? Ist der Gepunktete Rahmen in einem Browser anders gepunktet als im anderen?

        Viele Sachen lassen sich vereinheitlichen, es gibt dafür "Reset-Stylesheets" aber man muss da trotzdem über "alles" drüber und läuft Gefahr, Sachen zu übersehen an die man nicht denkt. "exotische" Elemente wie sub, sup, cite oder blockquote werden z.B. gerne vergessen aber trotzdem mal einfach im Reset-Stylesheet zurückgesetzt.

        Die bessere Wahl ist, alles sauber durchzuformatieren - und alles was man "vergisst" hat halt Standardformatierung.

      5. Hi!

        Firefox: FireBug

        Bei FF gibt es auch die Mglichkeit
        resource://gre/res/html.css
        in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

        FG Ulysses

        1. Bei FF gibt es auch die Mglichkeit
          resource://gre/res/html.css
          in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

          Das ist aber nicht alles - es gibt z.B. noch quirk.css (für die Korrekturen im Quirksmode). Oder forms.css für die Formatierung der Formularelemente, die sind in html.css nicht enthalten.

          Dasselbe findet sich übrigens auch im Filesystem unter %ProgramFiles%\Mozilla Firefox\res bzw. unter %ProgramFiles(x86)%\Mozilla Firefox\res bei 64-Bit-Windowsen mit 32-Bit-Fuchs.

        2. Bei FF gibt es auch die Mglichkeit
          resource://gre/res/html.css
          in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

          Zitat aus eben diesem File:

          /* 3 deep (or more) unordered lists use a square */  
          ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,  
          ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,  
          ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,  
          ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,  
          ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,  
          ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,  
          menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,  
          menu ol menu, menu ul menu, menu menu menu, menu dir menu,  
          menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,  
          dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,  
          dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,  
          dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {  
            list-style-type: square;  
          }  
          
          

          48 Selektoren (4*4*3)
          Kopfkratz, was wenn jetzt neue Elemente in diese Regel integriert werden müssen?

          mfg Beat

          --
          ><o(((°>           ><o(((°>
             <°)))o><                     ><o(((°>o
          Der Valigator leibt diese Fische
          1. Bei FF gibt es auch die Mglichkeit
            resource://gre/res/html.css
            in die Adresszeile einzugeben, um das default css angezeigt zu bekommen.

            Zitat aus eben diesem File:

            /* 3 deep (or more) unordered lists use a square */

            ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
            ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
            ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
            ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
            ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
            ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
            menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
            menu ol menu, menu ul menu, menu menu menu, menu dir menu,
            menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
            dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
            dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
            dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
              list-style-type: square;
            }

            
            > 48 Selektoren (4\*4\*3)  
            > Kopfkratz, was wenn jetzt neue Elemente in diese Regel integriert werden müssen?  
              
            dir und menu sind deprecated, dafür kommt über kurz oder lang vermutlich nav "davor"  
              
            warum man menu in HTML5 nicht behalten hat und dafür "nav" zusätzlich erfunden hat, erschließt sich mir aber ohnehin nicht.
            
            1. warum man menu in HTML5 nicht behalten hat und dafür "nav" zusätzlich erfunden hat, erschließt sich mir aber ohnehin nicht.

              Ein Menu ist in meinem Verständnis etwas anderes als eine Navigation.
              In der Navigation navigiere ich durch eine Website.
              Ein Menu aber ist überwiegend eine Ansammlung von lokalen Funktionen.

              http://www.w3.org/TR/html5/interactive-elements.html#menus

              Das scheint auch die Auffassung des HTML5 lebendigen Drafts zu sein

              mfg Beat

              --
              ><o(((°>           ><o(((°>
                 <°)))o><                     ><o(((°>o
              Der Valigator leibt diese Fische
              1. Grüße dich Beat,

                http://www.w3.org/TR/html5/interactive-elements.html#menus

                Das scheint auch die Auffassung des HTML5 lebendigen Drafts zu sein

                Es gibt keinen "HTML5 lebendigen Draft". Es gibt den Entwurf der HTML5-Spezifikation, auf den du verlinkt hast und ein ähnliches Dokument bei der WHATWG, das als "HTML Living Standard" bezeichnet wird.

                Gruß, Daniel

            2. @@suit:

              nuqneH

              warum man menu in HTML5 nicht behalten hat und dafür "nav" zusätzlich erfunden hat, erschließt sich mir aber ohnehin nicht.

              Weil sie unterschiedlich sind?

              'menu' dient(e) als Container für ausschließlich 'li'-Elemente. [HTML401]

              'nav' dient als Container für verschiedene Elemente. Darin kann außer den Links durchaus auch eine Überschrift enthalten sein. [HTML5]

              Qapla'

              --
              Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
              (Mark Twain)
              1. 'menu' dient(e) als Container für ausschließlich 'li'-Elemente. [HTML401]

                'nav' dient als Container für verschiedene Elemente. Darin kann außer den Links durchaus auch eine Überschrift enthalten sein. [HTML5]

                Hätte eine Erweiterung der Defintion nicht gereicht? So wie die Navigationslisten die in XHTML 2.0 vorgesehen waren?

                1. @@suit:

                  nuqneH

                  Hätte eine Erweiterung der Defintion nicht gereicht? So wie die Navigationslisten die in XHTML 2.0 vorgesehen waren?

                  HTML5 und irgendwas aus XHTML 2.0 übernehmen? Sie belieben zu scherzen?

                  Qapla'

                  --
                  Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
                  (Mark Twain)
    2. Hallo,

      wie kann ich mir im IE, im FF und in Opera die Standardeinstellungen (margin,padding.font etc.) der tags (h1, h2, ...p, div, etc.)
      anzeigen lassen?

      IE: Entwicklertools
      Firefox: FireBug
      Opera: Dragonfly

      Im IE (8) finde ich unter den Entwicklertools nur das CSS für die aktuelle Seite, nicht aber die Std-Einstellungen.
      Bin ich auf einem Auge blind?
      Karl-Heinz

      1. Im IE (8) finde ich unter den Entwicklertools nur das CSS für die aktuelle Seite, nicht aber die Std-Einstellungen.

        Binde einfach kein CSS ein und schau dir mit den Entwicklertools die Formatierung eines bestimmten Elements an - dann siehst du die Vorgabeeinstellungen.