Browser ignorieren media=screen :-(

[Markus Bauer]

Hi,

Für eine Applikation (die nur unter IE laufen muss) habe ich eine "Non-Scrolling Area" gebastelt wie sie früher unter WinHelp angezeigt wurde. Das ganze soll aber NUR beim Anzeigen auf dem Bildschirm aktiviert sein und NICHT beim Drucken!!

Ich habe dazu folgende Container erstellt:

  
<div id="nsa"><div class="cont">  
INHALT DER NONSCROLLING AREA  
</div></div><div id="sa"><div class="cont">  
INHALT DER SEITE  
</div></div>  

In einer nsa.css habe ich folgenden Code:

  
@media screen  
{  
	body  
	{  
		margin:0;  
		padding:0;  
		overflow:hidden;  
	}  
  
	#nsa  
	{  
		width:100%;  
		border-bottom: 1px black solid;  
	}  
  
	#sa  
	{  
		width: 100%;  
		margin-left:0;  
		overflow:auto;  
	}  
	div.cont  
	{  
		margin: 0;  
		margin-left: 10px;  
		margin-right: 10px;  
	}  
}  

Man sieht schon: Dieser soll NUR NUR NUR zugeordnet werden bei der Darstellung am Bildschirm. ZUSÄTZLICH binde ich mit

  
<link href="nsa.css" rel="stylesheet" type="text/css" media="screen">  

ein. Also wieder mit media=screen. Leider funktioniert das beim Drucken nicht. In IE wird eine Art "Screenshot" gedruckt, also man sieht den ersten Teil des Inhaltes und rechts davon eine Scrollleiste. Beim FF sieht man zwar die Scroll-Leiste nicht, aber es wird ebenfalls nur die erste (am Display sichtbare) Seite gedruckt.

Mache ich dabei was falsch? Falls nicht, gibt es einen Workaround für das Problem?

PS: Für das Beispiel jetzt nicht von Bedeutung, aber wen es interessiert: Die Größe der div-Container wird scriptbasiert zugewiesen - per onLoad und onResize:

  
function resize()  
{  
	var height_window = document.body.clientHeight;  
	var height_nsa = document.getElementById('nsa').offsetHeight;  
  
	if(height_window - height_nsa > 10)  
	{  
		document.getElementById('sa').style.height = height_window - height_nsa;  
		document.getElementById('sa').style.overflow = 'auto';  
		document.getElementsByTagName('body')[0].style.overflow = 'hidden';  
	}  
	else  
	{  
		// alert('FIXXME: Fehler beim Nonscrollingarea!');  
		document.getElementsByTagName('body')[0].style.overflow = 'auto';  
		document.getElementById('sa').style.overflow = 'visible';  
	}  
}  

[Steel]

Hi!

Okay. Du hast ein Div. Divs sind gewoehnlich sichtbar. Diesem Div sagst Du nun, es soll auf einem Bildschirm sichtbar sein. Gut. Das Div weiss nun ziemlich sicher: Ich soll sichtbar sein. Auch auf Bildschirmen!

Wo sagst Du dem Div, dass es beim Drucken unsichtbar sein soll?

[Markus Bauer]

Okay. Du hast ein Div. Divs sind gewoehnlich sichtbar. Diesem Div sagst Du nun, es soll auf einem Bildschirm sichtbar sein. Gut. Das Div weiss nun ziemlich sicher: Ich soll sichtbar sein. Auch auf Bildschirmen!

Wo sagst Du dem Div, dass es beim Drucken unsichtbar sein soll?

Hi,

Wir verstehen uns falsch. Es geht nicht darum ein div sichtbar/unsichtbar zu machen sondern um die Eigenschaft overflow:auto; bei "sa" (Scrolling-Area) bzw. der präsiesen Angabe der Größe. Am Bildschirm ist nsa+sa genau die Höhe des Bildschirmes und der sa ist durch overflow:auto der Scrollbalken zugeordnet den normalerweise das Hauptfenster hätte. Klar soweit?

Nun, die Eigenschaften sollen aber nur am Bildschirm applied werden. Deswegen media=screen. Für den Drucker sollen die CSS Eigenschaften einfach nicht zugewiesen werden was bedeutet dass sie normale DIVs sind und ganz NORMAL angezeigt werden.

lg,
Markus

[Steel]

Hoi!

Wir verstehen uns falsch. Es geht nicht darum ein div sichtbar/unsichtbar zu machen sondern um die Eigenschaft overflow:auto; bei "sa" (Scrolling-Area) bzw. der präsiesen Angabe der Größe. Am Bildschirm ist nsa+sa genau die Höhe des Bildschirmes und der sa ist durch overflow:auto der Scrollbalken zugeordnet den normalerweise das Hauptfenster hätte. Klar soweit?

Klar. Ich war irgendwie nicht ganz bei der Sache.

Nun, die Eigenschaften sollen aber nur am Bildschirm applied werden. Deswegen media=screen. Für den Drucker sollen die CSS Eigenschaften einfach nicht zugewiesen werden was bedeutet dass sie normale DIVs sind und ganz NORMAL angezeigt werden.

Das gleiche: Du legst Styles (die Groessen) mit JS fest. (Warum eigentlich?) Und das nichtmal besonders valide. Ich sehe keine Massangaben und was steht beim ersten Aufruf von document.getElementById('nsa').offsetHeight darin? Ich rate: Ein Leersting.

Was passiert, wenn Du das zuweisen per JS nicht tust? Hast Du schon versucht Styles fuer print zu benutzen? Schonmal versucht mit Klassen zu arbeiten, die Du per JS zuweist, statt, die Styleangaben direkt zu bearbeiten?

[Markus Bauer]

Hoi!

Hi,

Nun, die Eigenschaften sollen aber nur am Bildschirm applied werden. Deswegen media=screen. Für den Drucker sollen die CSS Eigenschaften einfach nicht zugewiesen werden was bedeutet dass sie normale DIVs sind und ganz NORMAL angezeigt werden.

Das gleiche: Du legst Styles (die Groessen) mit JS fest.

Aaach, ich glaube ich verstehe. Ich weise per JS die Eigenschaften overflow:auto und die Größe zu und und gebe *dabei* nicht explizit das "media" an. Deswegen wirds auf alle applied.

(Warum eigentlich?)

Hast du eine bessere Lösung? Das Problem ist dass ich die Größe abhängig von der Höhe des Viewports setzen muss. Und das geht ja nur mit JS?!

Und das nichtmal besonders valide.

Das ist blunzn. Wie gesagt handelt es sich dabei um eine proprietäre Datenbankanwendung die HTML lediglich als Darstellung in Zusammenhang mit dem "WebBrowser Control" nutzt. Das ganze muss also nur mit dem IE funktionieren (möglichst breit) und auch nicht valide sein.

Ich sehe keine Massangaben

Hmm, ist das wichtig? Wo würdest du die Massangaben einsetzen?

und was steht beim ersten Aufruf von document.getElementById('nsa').offsetHeight darin? Ich rate: Ein Leersting.

Keine Ahnung, mag sein. Nein, es wird die tatsächliche Höhe drin stehen, vermute ich. Wie gesagt, ich rufe die Funktion bei onLoad und onResize auf und das klappt soweit eigentlich toll.

Was passiert, wenn Du das zuweisen per JS nicht tust?

Dann fehlt mir die Scrollleiste für die Scrolling-Area.

Hast Du schon versucht Styles fuer print zu benutzen?

Nein, ich dachte wenn ich sie einfach nur für screen zuweise sind sie bei printer leer, was eigentlich passt.

Nur: Wie mache ich das eigentlich mit JS?

Schonmal versucht mit Klassen zu arbeiten, die Du per JS zuweist, statt, die Styleangaben direkt zu bearbeiten?

Das hört sich sehr interessant an aber leider fehlt mir da die Erfahrung bzw. was du genau meinst. Hast du zufällig einen Pointer dazu?

Besten Dank mal dass du mich auf den richtigen Weg gebracht hast!

LG,
Markus

[Steel]

Moin!

Aaach, ich glaube ich verstehe. Ich weise per JS die Eigenschaften overflow:auto und die Größe zu und und gebe *dabei* nicht explizit das "media" an. Deswegen wirds auf alle applied.

Richtig. Die JS style Eigenschaft macht keinen Unterschied.

(Warum eigentlich?)

Hast du eine bessere Lösung? Das Problem ist dass ich die Größe abhängig von der Höhe des Viewports setzen muss. Und das geht ja nur mit JS?!

CSS. 50% vom Viewport sind 50% vom Viewport, egal wie gross der ist. Wenn Du natuerlich Groessen in Abhaengigkeit von anderen groessen zuweisen willst, ist Js durchaus eine legitime Sache. Nur musst Du dann andere Wege beschreiten, wenn Du Darstellungen fuer verschiedene Medien brauchst. (s.u.)

Ich sehe keine Massangaben

Hmm, ist das wichtig? Wo würdest du die Massangaben einsetzen?

Wenn Der Browser wissen soll, wieviele von was er setzen muss, schon. Maeuse? Bowlingkugeln? Haselnusstoertchen? Pixel? em? Prozent? Jahre?

style.height = zahl + 'px'

;)

und was steht beim ersten Aufruf von document.getElementById('nsa').offsetHeight darin? Ich rate: Ein Leersting.

Keine Ahnung, mag sein. Nein, es wird die tatsächliche Höhe drin stehen, vermute ich. Wie gesagt, ich rufe die Funktion bei onLoad und onResize auf und das klappt soweit eigentlich toll.

Klar. Aber eine mit CSS gemachte Angabe ist Javascript unbekannt. Glaubs mir. Erst wenn Du diese Angabe mit JS setzt, kann JS sie auch auslesen. Computed Style ware hier ein Begriff zum googlen.

Was passiert, wenn Du das zuweisen per JS nicht tust?

Dann fehlt mir die Scrollleiste für die Scrolling-Area.

Aber sonst laeuft alles wie gewollt. Oder nicht? Ergo ist dein JS das Problem.

Hast Du schon versucht Styles fuer print zu benutzen?

Nein, ich dachte wenn ich sie einfach nur für screen zuweise sind sie bei printer leer, was eigentlich passt.

Nur: Wie mache ich das eigentlich mit JS?

Gar nicht. Das ist das Problem. Ich kenne jedenfalls keine Methode. Deshalb habe ich das hier geschrieben:

Schonmal versucht mit Klassen zu arbeiten, die Du per JS zuweist, statt, die Styleangaben direkt zu bearbeiten?

Das hört sich sehr interessant an aber leider fehlt mir da die Erfahrung bzw. was du genau meinst. Hast du zufällig einen Pointer dazu?

Das hilft Dir leider direkt auch nicht weiter. Du Koenntest zwar Klassen zuweisen, muesstest aber ja trotzdem mit JS den Hoehenwert festlegen.

<http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=class@title=Einen Link haette ich.>

Spontan habe ich keine konkrete Idee, wie Du Dein Problem loesen kannst. Du muesstest evtl. eine Printregel erschaffen die spezifischer ist, als was Du mit Javascript machst.

Wenn Du die Groessen nicht fest im CSS angeben kannst (gerne prozentual), also auf eine Berechnung mit JS angewiesen bist, Ist das eine verzwickte Sache.

Struppi hat mal ein paar Funktionen veroeffentlicht, die die Manipulation von Klassen ermoeglichen. (bin nicht sicher ob das mittlerweile alle Browser koennen)

So koenntest Du eine Klasse editieren die nur fuer den Screen benutzt wird. Eventuell muesstest Du noch mit einem print-style arbeiten.

Besten Dank mal dass du mich auf den richtigen Weg gebracht hast!

Och. Nicht dafuer.