Werkler: Conditional Comments für den IE

Hallo,

wenn ich folgendes CSS-Fragment in mein Stylesheet einfüge, so wird es z. B. auch vom Firefox angewendet, was ich natürlich nicht will.

<!--[if gte IE 5]>
a.testbox span {
 display: none;
 width: 500px;
 position: relative;
 margin: 0 0 0 10px;
 }
a.testbox:hover span {
 display: block;
 }
<![endif]-->

Wie kann ich es nur für den IE lesbar machen?

Gruß,
Werkler

  1. Hallo

    wenn ich folgendes CSS-Fragment in mein Stylesheet einfüge, so wird es z. B. auch vom Firefox angewendet, was ich natürlich nicht will.

    <!--[if gte IE 5]>
    <![endif]-->

    Der CC hat ansich _nichts_ mit CSS zu tun. Er ermöglicht es, innerhalb einer_HTML-Datei_ Bereiche zu definieren, die nur von MSIEs interpretiert werden.

    Wie kann ich es nur für den IE lesbar machen?

    Indem du innerhalb eines HTML-Dokuments den CC notierst und innerhalb des CCs gültige HTML-Elemente verwendest, z.B. auch <style></style>.

    Tschö, Auge

    --
    Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
    (Victor Hugo)
    Veranstaltungsdatenbank Vdb 0.2
    1. Hallo Auge, erst mal danke für deine Antwort.

      Indem du innerhalb eines HTML-Dokuments den CC notierst und innerhalb des CCs gültige HTML-Elemente verwendest, z.B. auch <style></style>.

      Und in einer HTML- oder PHP-Datei werden diese CCs dann von den anderen Browsern ignoriert? Für CSS-Dateien gibt es keine derartigen Browserweichen?

      Gruß,
      Werkler

      1. Hallo

        Indem du innerhalb eines HTML-Dokuments den CC notierst und innerhalb des CCs gültige HTML-Elemente verwendest, z.B. auch <style></style>.

        Und in einer HTML- oder PHP-Datei werden diese CCs dann von den anderen Browsern ignoriert?

        Ja.

        Für CSS-Dateien gibt es keine derartigen Browserweichen?

        Derartige nicht, Hacks, die die verschiedensten Browser ausschließen bzw. exklusiv ansprechen, schon.

        Tschö, Auge

        --
        Die Musik drückt aus, was nicht gesagt werden kann und worüber es unmöglich ist zu schweigen.
        (Victor Hugo)
        Veranstaltungsdatenbank Vdb 0.2
      2. Moin!

        Und in einer HTML- oder PHP-Datei werden diese CCs dann von den anderen Browsern ignoriert? Für CSS-Dateien gibt es keine derartigen Browserweichen?

        <!--[if gte IE 5]>
        <link rel="stylesheet" type="text/css" href="/ie5.css">
        <![endif]-->

        Wozu noch?

        Allerdings gibt sie. Diese basieren darauf, dass die verschiedenen Versionen des IE verschiedene feine und brauchbare Sachen nicht (richtig) interpretieren können. Das ist nicht wirklich gut und zukunftssicher.

        MFFG (Mit freundlich- friedfertigem Grinsen)

        fastix®

        --
        Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development
        1. @@fastix®:

          Und in einer HTML- oder PHP-Datei werden diese CCs dann von den anderen Browsern ignoriert?

          Ein Browser bekommt kein PHP zu sehen.

          Für CSS-Dateien gibt es keine derartigen Browserweichen?

          <!--[if gte IE 5]>
          <link rel="stylesheet" type="text/css" href="/ie5.css">
          <![endif]-->

          Wozu noch?

          Damit man conditional comments dort einsetzen könnte, wo man sie oft benötigt: in CSS.

          Cheatah wird ja nicht müde zu betonen, dass das Beheben von Browserbugs bei der Umsetzung von CSS nicht Aufgabe von HTML sein sollte (dass also in HTML nicht mehrere browserspezifische Stylesheets per conditional comments einbunden werden sollten), sondern dass dies Aufgabe von CSS selbst sein sollte (weshalb er für CSS-Hacks plädiert).

          Womit er durchaus recht hat, zumindest in den nichtgeklammerten Teilen. Ich persönlich mag Hacks nicht und sehe conditional comments in HTML als das kleinere Übel an.

          Aber besser wäre die Möglichkeit von conditional comments in CSS. Warum gibts es die dort nicht wie in HTML und mit conditional compilation auch in in JavaScript? Dann wäre das HTML sauber und CSS-Hacks auch unnötig.

          Live long and prosper,
          Gunnar

          --
          „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
          1. Moin!

            Aber besser wäre die Möglichkeit von conditional comments in CSS. Warum gibts es die dort nicht wie in HTML und mit conditional compilation auch in in JavaScript? Dann wäre das HTML sauber und CSS-Hacks auch unnötig.

            Wäre das erste mal, daß Mickisoft etwas durchdacht, zukunftsicher und konsequent zuende bringt. Das weiß ich bereits seit Anfang der 90er :(

            Cü,

            Kai

            --
            What is the difference between Scientology and Microsoft? One is an
            evil cult bent on world domination and the other was begun by L. Ron
            Hubbard
            ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|]
          2. Moin!

            Cheatah wird ja nicht müde zu betonen, dass das Beheben von Browserbugs bei der Umsetzung von CSS nicht Aufgabe von HTML sein sollte (dass also in HTML nicht mehrere browserspezifische Stylesheets per conditional comments einbunden werden sollten), sondern dass dies Aufgabe von CSS selbst sein sollte (weshalb er für CSS-Hacks plädiert).

            Nun ja. Ich werde nicht müde zu betonen, dass die webworker dieser Welt endlich aufhören sollten für schlechte Browser die Verantwortung zu übernehmen, statt ein simples "Die Seite sieht richtig beschissen aus? Beschweren Sie sich doch bitte beim Hersteller Ihres so genannten Browsers!" rauszuhängen. Es kann nicht Aufgabe der Webworker sein die Unzulänglichkeiten schlechter Software auszugleichen.

            Nur geht das eben nicht so einfach. Die Webworker sind darauf angewiesen, was die Kunden wollen und die Browser können. Und bei den Browsern gibt es mit Conditional Comments eine recht brauchbare (und theoretisch nicht perfekte Lösung) während die CSS-Hacks zwar sehr partiell näher an der Theorie liegen, aber ich deren Beständigkeit nicht sehe. Ich glaube auch mit Conditional Comments dürften Nachbesserungen für zukünftige mangelhafte Software einfacher sein- solange wenigstens diese unterstützt werden...

            MFFG (Mit freundlich- friedfertigem Grinsen)

            fastix®

            --
            Als Freiberufler bin ich immer auf der Suche nach Aufträgen: Schulungen, Seminare, Training, Development
            1. Mahlzeit,

              Nun ja. Ich werde nicht müde zu betonen, dass die webworker dieser Welt endlich aufhören sollten für schlechte Browser die Verantwortung zu übernehmen, statt ein simples "Die Seite sieht richtig beschissen aus? Beschweren Sie sich doch bitte beim Hersteller Ihres so genannten Browsers!" rauszuhängen. Es kann nicht Aufgabe der Webworker sein die Unzulänglichkeiten schlechter Software auszugleichen.

              Ich bastele bereits seit mehreren Jahren Folgendes (oder Ähnliches) in ALLE von mir erstellten Seiten ein:

              -----8<-----8<-----8<-----

              <head>
              [...]

                
              <style type="text/css">  
              .iewarn {  
               visibility: hidden;  
               margin: 0px;  
               border-width: 0px;  
               padding: 0px;  
               font-size: 0pt;  
              }  
                
              #iewarn {  
               visibility: hidden;  
               padding: 0px;  
               font-size: 0pt;  
              }  
              </style>  
                
              <!--[if IE]>  
              <style type="text/css">  
              .iewarn {  
               visibility: visible;  
               margin-bottom: 20px;  
               border-width: 10px;  
               border-color: #FF0000;  
               border-style: solid;  
               padding-top: 10px;  
               padding-bottom: 10px;  
               padding-left: 100px;  
               padding-right: 100px;  
               background-color: #FFFF00;  
               color: #000000;  
               font-family: Arial;  
               font-size: 12pt;  
               text-align: justify;  
              }  
                
              #iewarn {  
               visibility: visible;  
               padding-bottom: 10px;  
               font-family: Tahoma;  
               font-size: 16pt;  
               font-weight: bold;  
               text-align: center;  
              }  
              </style>  
              <![endif]-->  
              </head>  
                
              <body>  
              <!--[if IE]>  
              <div class="iewarn">  
              <div id="iewarn">Achtung!</div>  
              Sie verwenden den Microsoft Internet Explorer. Dieser Browser stellt selbst auf gepatchten Systemen eine kritische <a href="http://www.heise.de/foren/search.shtml?f=nt&T=Internet+Explorer+Sicherheitslücke&w=f" target="_blank">Sicherheitsl&uuml;cke</a> dar und gef&auml;hrdet Ihre pers&ouml;nlichen Daten. Aus diesem Grund empfehlen wir die Benutzung von <a href="http://www.mozilla.org/products/firefox/" target="_blank">Firefox</a>.</div>  
              <![endif]-->  
              [...]  
              </body>  
              
              

              ----->8----->8----->8-----

              In "richtigen" Browsern sieht dann trotzdem alles normal aus ... ;-)

              MfG,
              EKKi

              --
              sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
              1. Hi,

                Ich bastele bereits seit mehreren Jahren Folgendes (oder Ähnliches) in ALLE von mir erstellten Seiten ein:

                aber warum nur so umständlich?

                <style type="text/css">
                .iewarn {
                visibility: hidden;
                margin: 0px;
                border-width: 0px;
                padding: 0px;
                font-size: 0pt;
                }

                #iewarn {
                visibility: hidden;
                padding: 0px;
                font-size: 0pt;
                }

                unnötig.  
                  
                
                > ~~~html
                
                <!--[if IE]>  
                
                > <style type="text/css">  
                > .iewarn {  
                >  visibility: visible;  
                >  margin-bottom: 20px;  
                >  border-width: 10px;  
                >  border-color: #FF0000;  
                >  border-style: solid;  
                >  padding-top: 10px;  
                >  padding-bottom: 10px;  
                >  padding-left: 100px;  
                >  padding-right: 100px;  
                >  background-color: #FFFF00;  
                >  color: #000000;  
                >  font-family: Arial;  
                >  font-size: 12pt;  
                >  text-align: justify;  
                > }  
                >   
                > #iewarn {  
                >  visibility: visible;  
                >  padding-bottom: 10px;  
                >  font-family: Tahoma;  
                >  font-size: 16pt;  
                >  font-weight: bold;  
                >  text-align: center;  
                > }  
                > </style>  
                > <![endif]-->  
                > </head>  
                >   
                > <body>  
                > <!--[if IE]>  
                > <div class="iewarn">  
                > <div id="iewarn">Achtung!</div>
                
                

                puh, das geht aber schöner und viel kürzer - bedenke, dass der Code an alle Browser übertragen werden muss:

                <style type="text/css">  
                #iewarn {  
                  margin:0 20px 0 0; padding:10px 100px;  
                  border:10px solid red;  
                  color: black; background-color: #FF0;  
                  font:1em Arial,sans-serif;  
                  text-align:justify;  
                }  
                #iewarn strong {  
                  display:block; padding-bottom:10px;  
                  font:bold 1.5em Tahoma,sans-serif;  
                  text-align:center;  
                }  
                </style>  
                </head>  
                <body>  
                <!--[if IE]>  
                <div id="iewarn"><strong>Achtung!</strong>
                

                freundliche Grüße
                Ingo

                1. Mahlzeit,

                  aber warum nur so umständlich?

                  Naja, das war mein erster "Gehversuch" damals - hab ich gerade eben nur schnell aus der entsprechenden Seite (die mir als erstes eingefallen ist) rauskopiert ... andere (modernere) sind für mich hier bei der Arbeit auch teilweise nicht erreichbar.

                  Ich wollte ja auch nur das Prinzip verdeutlichen. :-)

                  puh, das geht aber schöner und viel kürzer - bedenke, dass der Code an alle Browser übertragen werden muss:

                  Klar geht das schöner - ist ja auch schon knapp 3 Jahre alt, der Code.

                  MfG,
                  EKKi

                  --
                  sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
        2. <!--[if gte IE 5]>
          <link rel="stylesheet" type="text/css" href="/ie5.css">
          <![endif]-->

          Wie läuft das eigentlich bei CSS, wenn man mehrere Dateien einbindet: Wird dann die Vereinigung aller CSS-Definitionen verwendet? Das heißt, das in der IE-Datei wird zusätzlich zu der für alle Browser angegebenen Datei verwendet, oder?

          Gruß.
          Werkler

          1. @@Werkler:

            Wie läuft das eigentlich bei CSS, wenn man mehrere Dateien einbindet: Wird dann die Vereinigung aller CSS-Definitionen verwendet? Das heißt, das in der IE-Datei wird zusätzlich zu der für alle Browser angegebenen Datei verwendet, oder?

            Das ist die übliche Vorgehensweise [http://forum.de.selfhtml.org/archiv/2008/1/t164759/#m1074794] (Möglicherweise ist auch der gesamte dortige Thread für dich interssant.)

            Live long and prosper,
            Gunnar

            --
            „Das Internet ist ein großer Misthaufen, in dem man allerdings auch kleine Schätze und Perlen finden kann.“ (Joseph Weizenbaum)
            1. Das ist die übliche Vorgehensweise [http://forum.de.selfhtml.org/archiv/2008/1/t164759/#m1074794] (Möglicherweise ist auch der gesamte dortige Thread für dich interssant.)

              Also für den IE7 funktioniert es jetzt auch wunderbar. Nur einer spinnt wieder rum ... der böse alte IE6. Da passiert beim überfahren des Hover-Bereichs gar nichts, nicht mal der Cursor ändert sich. Ich binde die Sheets wie folgt ein:

              <link href="<?php echo $ja_template_path;?>/css/template_css.css" rel="stylesheet" type="text/css" />
              <!--[if lt IE 6]>
              <link rel="stylesheet" type="text/css" href="<?php echo $ja_template_path;?>/css/ie.css">
              <![endif]-->
              <!--[if gte IE 7]>
              <link rel="stylesheet" type="text/css" href="<?php echo $ja_template_path;?>/css/ie.css">
              <![endif]-->

              D. h. eines für alle, und eines für alle IE-Versionen außer der 6er. (Dabei fällt mir ein, gibts für CCs sowas wie ne Und-Verknüpfung?).

              Die CSS-Klassen sehen so aus:

              a.testbox, a.testbox:active, a.testbox:link, a.testbox:visited {
                text-decoration: none;
                }
              a.testbox:hover {
                cursor:help;
                background: none;
                }
              a.testbox span {
                visibility:hidden;
                position:absolute;
                text-decoration:none;
                min-width:200px;
                width:200px;
               background-color: #000;
               border: none;
                z-index: 10;
                }
              a.testbox:hover span {
               visibility:visible;
               border: solid 1px #FFF;
               }

              Das background: none und das border: none; verwende ich bereits als Hack (wie unter http://www.quirksmode.org/css/ie6_purecsspopups.html beschrieben), bringt aber nix. Der Aufruf innerhalb der HTML-Seite so:

              <a class="testbox">Test<span>Hallo Welt!</span></a>

              Sieht jemand den begrabenen Hund bzw. den Hasen im Pfeffer?

              Gruß,
              Werkler

              1. Falls es noch jemanden interessiert: Es klappt nun. Und es lag nicht am CSS, sondern *trommelwirbel* am <a>-Tag, dem man unbedingt ein href-Attribut geben muss, damit es der IE6 als solches erkennt. Grausam.

                Gruß und danke an alle,
                Werkler.