Olaf Schneider: per js gesetzte Werte überschreiben Printstylesheet im IE6

Hallo,

Eine Website benutzt die css-Angaben min-width und max-width. Da der IE6 diese Funtionalität nicht kennt, wird diese dort per Javascript simuliert. Das führt dazu, dass unabhängig von den css-Definitionen einige div-Container per Javascript konkrete Breitenangeben bekommen.

Wenn ich jetzt eine Seite aus dem IE6 heraus ausdrucke, haben die per Javascript gesetzen Werte eine höhere Spezifität als die Definitionen im Druckstylesheet.

Das führt dazu, dass beim Drucken aus dem IE6 die per Javascript manipulierten Container zu breit sind und deren Inhalt beim Druck abgeschnitten wird.

Ein Lösungsansatz wäre, die proprietären Event-Handler window.onbeforeprint und window.onafterprint zu benutzen, um während des Drucks diese Werte zurückzusetzen.

Abgesehen von einem Springen des Layouts während des Drucks würde mich interessieren, ob es eine alternative, bessere Lösung für mein Problem gibt.

Kennt Ihr dieses Problem und wie löst Ihr das?

Grüße,
Olaf

  1. Hallo,

    Eine Website benutzt die css-Angaben min-width und max-width. Da der IE6 diese Funtionalität nicht kennt, wird diese dort per Javascript simuliert. Das führt dazu, dass unabhängig von den css-Definitionen einige div-Container per Javascript konkrete Breitenangeben bekommen.

    Vermutlich setzt du sie über Inline-Styles, also element.style. Klar, das ist problematisch in dem Fall. Besser du fügst sie dem vorhandenen Screen-Stylesheet dynamisch hinzu, auf das du über document.styleSheets zugreifen kannst und über addRule eine neue Style-Regel hinzufügen kannst.

    Mathias

    1. Hallo Mathias,

      Vermutlich setzt du sie über Inline-Styles, also element.style.

      richtig. Ich operiere mit Javascript direkt auf den DOM-Nodes.

      Besser du fügst sie dem vorhandenen Screen-Stylesheet dynamisch hinzu, auf das du über document.styleSheets zugreifen kannst und über addRule eine neue Style-Regel hinzufügen kannst.

      das klingt nach einer interessanten Lösung, die ich mir mal genauer anschauen werde. Vielen Dank.

      Gruß
      Olaf

    2. Hi,

      Besser du fügst sie dem vorhandenen Screen-Stylesheet dynamisch hinzu, auf das du über document.styleSheets zugreifen kannst und über addRule eine neue Style-Regel hinzufügen kannst.

      Der IE erlaubt ja auch JScript in Stylesheets:

      body {
        background: url("
          javascript:
            document.body.onload = function(){
              ...custom js here...
            }
        ");
      }

      Ich habe damit zwar null Erfahrung*), aber AFAIK könnte so ein Script im Printer-Stylesheet einfacher/sinnvoller sein ...

      *) es wird allerdings davor gewarnt, daß der IE diese Scripts wiederholt ausführt, sodaß sie - dies berücksichtigend - wohl durchdacht und nicht zu umfangreich sein sollten.

      Gruß, Cybaer

      --
      Man kann doch sehr leicht jenen tugendhaften Menschen begegnen, (...) die eine Art "unkrümmbaren Zeigefinger" besitzen, der ständig den kalten Wind des Rechthabens ausströmt. (Wolfgang Huber, Bischof)
      Die Tugend jagt nicht den Teufel, sondern den Sündhaften. Damit wird sie zum Terror. (Hans-Ulrich Jörges, Journalist)
      1. Nachtrag:

        Ich habe damit zwar null Erfahrung*),

        Wie ich eben zufällig gelesen habe, war MS so clever, daß das JS im Stylesheet global wirkt, und nicht nur für das in diesem Stylesheet angegebene Medium! Damit ist mein Vorschlag also auch nicht realisierbar ... :-/

        Gruß, Cybaer

        --
        Man kann doch sehr leicht jenen tugendhaften Menschen begegnen, (...) die eine Art "unkrümmbaren Zeigefinger" besitzen, der ständig den kalten Wind des Rechthabens ausströmt. (Wolfgang Huber, Bischof)
        Die Tugend jagt nicht den Teufel, sondern den Sündhaften. Damit wird sie zum Terror. (Hans-Ulrich Jörges, Journalist)
  2. Hi,

    Eine Website benutzt die css-Angaben min-width und max-width. Da der IE6 diese Funtionalität nicht kennt, wird diese dort per Javascript simuliert. Das führt dazu, dass unabhängig von den css-Definitionen einige div-Container per Javascript konkrete Breitenangeben bekommen.

    Wenn ich jetzt eine Seite aus dem IE6 heraus ausdrucke, haben die per Javascript gesetzen Werte eine höhere Spezifität als die Definitionen im Druckstylesheet.

    Per {element}.style gesetzte Werte duerften die gleiche Selektor-Spezifitaet haben, wie direkt per style-Attribut am Element gesetzte.
    Da kommst du also nicht mehr "drueber", und einen Medientyp anzugeben, ist per {element}.style auch nicht moeglich.

    Ein Lösungsansatz wäre, die proprietären Event-Handler window.onbeforeprint und window.onafterprint zu benutzen, um während des Drucks diese Werte zurückzusetzen.

    Ein anderer waere, die "berechnete" Minimal-/Maximalbreite nicht ueber direkte Zuweisung an {element}.style zuzuweisen - sondern ueber Manipulation von CSS-Regeln (document.styleSheets). Dabei koennte man direkt auf den/die gewuenschten Medientypen ansprechen, und das Druckstylesheet unangetastet lassen.

    MfG ChrisB

    1. Hallo ChrisB,

      Ein anderer waere, die "berechnete" Minimal-/Maximalbreite nicht ueber direkte Zuweisung an {element}.style zuzuweisen - sondern ueber Manipulation von CSS-Regeln (document.styleSheets). Dabei koennte man direkt auf den/die gewuenschten Medientypen ansprechen, und das Druckstylesheet unangetastet lassen.

      Vielen Dank für Deinen Ansatz, der sich mit Mathias’ deckt. Ich werde das ausprobieren.

      Gruß
      Olaf

  3. Hi,

    Abgesehen von einem Springen des Layouts während des Drucks würde mich interessieren, ob es eine alternative, bessere Lösung für mein Problem gibt.

    Goggel mal nach: ie behaviors

    Gruß, Cybaer

    --
    Man kann doch sehr leicht jenen tugendhaften Menschen begegnen, (...) die eine Art "unkrümmbaren Zeigefinger" besitzen, der ständig den kalten Wind des Rechthabens ausströmt. (Wolfgang Huber, Bischof)
    Die Tugend jagt nicht den Teufel, sondern den Sündhaften. Damit wird sie zum Terror. (Hans-Ulrich Jörges, Journalist)
    1. Hallo Cybaer,

      Goggel mal nach: ie behaviors

      nö, mach ich nicht ;-)

      Im Ernst: Ich habe auf Basis von Mathias’ und ChrisBs Vorschlag schon eine Lösung für den IE6 implementiert, die anstandslos funktioniert.

      Da eben nicht die Elemente, sondern die Stylesheetdefinitionen selber manipuliert werden, bleibt das Print-Stylesheet unangetastet.

      Ich kenne mich mit Behaviors nicht aus und, habe sie lediglich einmal in einem früheren Projekt benutzt. Es wäre jedenfalls wieder eine Datei mehr, während meine Lösung in der einen Javascriptdatei, die ohnehin einige Layoutfunktionen mit übernimmt, mit Platz hat.

      Gruß
      Olaf

      1. Hi,

        nö, mach ich nicht ;-)

        Geh sterben! ;-)

        Im Ernst: Ich habe auf Basis von Mathias’ und ChrisBs Vorschlag schon eine Lösung für den IE6 implementiert, die anstandslos funktioniert.

        Da hatte und habe ich keinerlei Zweifel! 8-)

        Es wäre jedenfalls wieder eine Datei mehr,

        Jein. IE erlaubt auch JS direkt im CSS-Code (s. Beispiel im anderen Posting von mir), was aber leider trotzdem nicht hilfreich ist (s. Eigenkommentar darauf) ... =;->

        Gruß, Cybaer

        --
        Man kann doch sehr leicht jenen tugendhaften Menschen begegnen, (...) die eine Art "unkrümmbaren Zeigefinger" besitzen, der ständig den kalten Wind des Rechthabens ausströmt. (Wolfgang Huber, Bischof)
        Die Tugend jagt nicht den Teufel, sondern den Sündhaften. Damit wird sie zum Terror. (Hans-Ulrich Jörges, Journalist)
        1. Hallo Cybaer,

          nö, mach ich nicht ;-)

          Geh sterben! ;-)

          Hm, was hat sterben denn mit Javascript zu tun? Oder meintest Du „gehst erben“?

          Es wäre jedenfalls wieder eine Datei mehr,

          Jein. IE erlaubt auch JS direkt im CSS-Code (s. Beispiel im anderen Posting von mir), was aber leider trotzdem nicht hilfreich ist (s. Eigenkommentar darauf) ... =;->

          Selbst wenn es ginge, halte ich ausführbaren Code gerne aus css-Dateien heraus, selbst wenn der Code ausschließlich Layoutzwecke verfolgt und die css-Datei eine vom Typ „Ich helf dem IE, denn alleine kriegt er es nicht auf die Kette“ ist.

          Gruß
          Olaf

          1. Hi,

            Oder meintest Du „gehst erben“?

            Erben? Ja, erben find ich auch Klasse!

            Gruß, Cybaer

            --
            Man kann doch sehr leicht jenen tugendhaften Menschen begegnen, (...) die eine Art "unkrümmbaren Zeigefinger" besitzen, der ständig den kalten Wind des Rechthabens ausströmt. (Wolfgang Huber, Bischof)
            Die Tugend jagt nicht den Teufel, sondern den Sündhaften. Damit wird sie zum Terror. (Hans-Ulrich Jörges, Journalist)