Dieter Raber: @import css IE

Hallo alle,

Ich stehe ein bisschen auf dem Schlauch, fuerchte ich. Ich verwende fuer eine Webseite drei Stylesheets, die so eingebunden sind:

<link rel="stylesheet" title="standard" type="text/css" href="css/basic.css" />
<style type="text/css">
@import url(css/advanced.css) screen;
</style>
<!--[if IE]>
  <style type="text/css">@import url(css/msie.css);</style>
<![endif]-->

basic ist so gestrickt, dass die Darstellung in alten Browsern gerade noch ertraeglich ist, advanced enthaelt bisher lediglich ein paar Kistchen, um Bilder auszurichten:

#content .pic-r,
#content .pic-l {
border: 1px #ccc solid;
margin: 12px;
margin-top: 0;
}

#content .pic-l {
float: left;
margin-left: 0;
}

#content .pic-r {
float: right;
margin-right: 0;
}

msie enthaelt folgendes:

@media screen {
    html, body {
      height: 100%; overflow-y: hidden;
    }
    #container {
      height: 100%; width: 100%; overflow: auto;
    }
    #content {
      position: static;
    }
  }

Dem aufmerksamen Leser wird nicht entgangen sein, dass letzteres der position:fixed-Hack aus Selfhtml ist. Allerdings stellt der IE die Bilder mit den Klassen .pic-l/.pic-r nur richtig dar, wenn ich den entsprechenden Block aus advanced nach msie kopiere. Ich habe schon ziemlich viel rumprobiert mit den ueblichen Debugtricks, komme aber auf keinen gruenen Zweig.

Koennte mich vielleicht mal jemand mit der Nase draufstossen? ;-)

Gruß,

Dieter

  1. Hi,

    Dem aufmerksamen Leser wird nicht entgangen sein, dass letzteres der position:fixed-Hack aus Selfhtml ist.

    Du hättest da mal zwei Seiten weiter blättern sollen zu http://de.selfhtml.org/css/layouts/browserweichen.htm#ausschliessen:
    "Diese CSS-Datei binden Sie - ebenfalls für alle Browser - über das link-Element mit einer Seite Medienangabe ein."
    Oder weiter unten:
    "Um CSS-Dateien für bestimmte Ausgabemedien nur modernen Browsern einschließlich dem Internet Explorer zur Verfügung zu stellen, binden Sie eine CSS-Datei mit dem entsprechenden media-Attribut über das link-Element ein und referenzieren hierin eine weitere CSS-Datei über @import."

    Der Knackpunkt hierbei ist "einschließlich dem Internet Explorer" - denn der akzeptiert keine media-Angabe bei @import.

    freundliche Grüße
    Ingo

    1. Hallo Ingo,

      Du hättest da mal zwei Seiten weiter blättern sollen

      Haette ich wohl tun sollen, jetzt ist alles wie gewuenscht.

      Vielen Dank fuer den Hinweis!

      Gruß,

      Dieter

      1. Hi,

        Du hättest da mal zwei Seiten weiter blättern sollen
        Haette ich wohl tun sollen, jetzt ist alles wie gewuenscht.

        schön.
        Obwohl übrigens auch ein Blick in http://de.selfhtml.org/css/formate/einbinden.htm#link_media geholfen hätte:
        "Beachten Sie:
        Der Internet Explorer unterstützt die Einbindung über @import in Verbindung mit der Angabe von Ausgabemedien nicht."

        freundliche Grüße
        Ingo

        1. Heißa, Ingo,

          Der Internet Explorer unterstützt die Einbindung über @import in Verbindung mit der Angabe von Ausgabemedien nicht.

          Schlimmer noch, wohl gemerkt. Ich erhalte regelmäßig 404-Fehler, da der Internet Explorer versucht, Dateien wie „http://cdauth.de/htdocs/text/welcome/url(/htdocs/style/advanced/screen_projection.css) screen, projection“ aufzurufen.

          Caramba!
          Grüße aus Biberach Riss,
          Candid Dauth (ehemals Dogfish)

          --
          „Bevorzuge Gerechtigkeit auch dann, wenn sie deinen eigenen Nachteil bedeutet.“ | Mein SelfCode
          http://cdauth.de/
          1. Hi,

            Schlimmer noch, wohl gemerkt. Ich erhalte regelmäßig 404-Fehler, da der Internet Explorer versucht, Dateien wie „http://cdauth.de/htdocs/text/welcome/url(/htdocs/style/advanced/screen_projection.css) screen, projection“ aufzurufen.

            das sieht mir eher nach der Funktion "offline verfügbar machen" aus. Die bringt auch ohne media-Angabe bei @import 404er.

            freundliche Grüße
            Ingo

            1. Hallo Ingo,

              Schlimmer noch, wohl gemerkt. Ich erhalte regelmäßig 404-Fehler, da der Internet Explorer versucht, Dateien wie „http://cdauth.de/htdocs/text/welcome/url(/htdocs/style/advanced/screen_projection.css) screen, projection“ aufzurufen.
              das sieht mir eher nach der Funktion "offline verfügbar machen" aus. Die bringt auch ohne media-Angabe bei @import 404er.

              nein, die Funktion ist es nicht. Ich habe "@import url(...) print;" auf einer relativ gut besuchten Seite verwendet und innerhalb kürzester Zeit war das errorlog von solchen Anfragen zugemüllt.

              Grüße aus Nürnberg
              Tobias

              1. Hi,

                das sieht mir eher nach der Funktion "offline verfügbar machen" aus. Die bringt auch ohne media-Angabe bei @import 404er.
                nein, die Funktion ist es nicht. Ich habe "@import url(...) print;" auf einer relativ gut besuchten Seite verwendet und innerhalb kürzester Zeit war das errorlog von solchen Anfragen zugemüllt.

                ich habe es gerade mal getestet. Mein IE6 fordert eine so referenzierte Datei beim Speichern tatsächlich nicht an, sondern nur die einfach über @import eingebundenen Dateien - dies natürlich fehlerhaft:
                "GET /web/WebDesign%20-%20Ende%20der%20guided%20tour%20durch%20meine%20Tips%20und%20Tricks-Dateien/1ngoxtra.css HTTP/1.1"

                Bei der Druckvorschau allerdings forderte er gleich zweimal hintereinander folgendes an:
                "GET /web/url(../selfhtml.css)%20print HTTP/1.1"

                Wirklich lustig... natürlich klar, daß er Dateien mit der media-Angabe screen immer anfordert.

                Dies zeigt nun auch, _warum_ der IE media-Angaben bei @import nicht unterstützt. Er würde sie unterstützen, kann nur die URL nicht richtig übermitteln. *rofl*

                freundliche Grüße
                Ingo

  2. Hi Dieter,

    <!--[if IE]>
      <style type="text/css">@import url(css/msie.css);</style>
    <![endif]-->

    Unabhängig von deinem eigentlichen Problem (wo dir Ingo ja schon geholfen hat), würde ich persöhnlich dir noch empfehlen, if IE lte 6 zu nehmen, denn man weiß ja nie, wie zukünftige IE Versionen sich verhalten ;-)

    MfG, Dennis.

    1. Hi,

      Unabhängig von deinem eigentlichen Problem (wo dir Ingo ja schon geholfen hat), würde ich persöhnlich dir noch empfehlen, if IE lte 6 zu nehmen, denn man weiß ja nie, wie zukünftige IE Versionen sich verhalten ;-)

      ich bin da eher pessimistisch und würde allenfalls lte 7 empfehlen, da - wie es ausschaut - auch die 7er Version in Sachen CSS noch nicht viel weiter sein wird.

      freundliche Grüße
      Ingo