2 externe Dateien und NS4.7x

[alfie]

Hallo!

Ich möchte auf einer Seite in der rechten oberen Ecke ein Logo drucken (aber nicht am Bildschirm anzeigen).
Dazu steht in der HTML-Datei:

<div class="logo1"><img src="./pics/home1.gif" width="70" height="26" border="0" alt="[logo]" title=""></div>

Es gibt 2 externe CSS-Datein, die im head eingebunden werden:

<link type="text/css" rel="stylesheet" href="./screen.css">
view-source:http://www.maloer.org/screen.css
<link type="text/css" rel="stylesheet" href="./print.css" media="print" >
view-source:http://www.maloer.org/print.css

wobei in screen.css
div.logo1 {display:none;}

und in print.css
div.logo1 {position:absolute;top:0cm;right:0cm;z-index:0;}

Das Einbinden für "screen" erfolgt ohne media-Referenz entsprechend einem Vorschlag von Ingo Turski (Archiv 2002, derzeit leider unerreichbar).
Begründung:
bei Verwendung von <link type="text/css" rel="stylesheet" href="./screen.css" media="screen"> steigt der NS4.7 aus (d.h. er zeigt *kein* externes CSS mehr an, und verwendet seine Standardeinstellungen)

So weit, so gut.
Mit Ingo's Methode funktioniert jetzt folgendes:
Bildschirm: IE6, Moz1.4, Opera7.22, NS4.75
Ausdruck: alle obigen, mit folgenden Macken:
Alle neueren formatieren zwar "korrekt" (d.h. im Rahmen ihres Verständnisses von CSS), *keiner* (!) druckt das Logo.
Der NS4.75 druckt wie zu erwarten mit den Formatierungen der screen.css, aber *mit* dem Logo in der linken oberen Ecke.
Lt. SelfHTML sollte der NS4 {display:none} interpretieren...

Schmerzlicher ist aber, dass die neueren Browser die CSS-Formatierung für das Logo ignorieren, wenn die Datei nicht mit media="screen" eingebunden wird.

Beispielseite: http://www.maloer.org/cv.htm

Irgendwelche Rat- und/oder Vorschläge?

mfg Alfie

[Detlef G.]

Hallo alfie

wobei in screen.css
div.logo1 {display:none;}

Damit wird das Logo ausgeblendet.

und in print.css
div.logo1 {position:absolute;top:0cm;right:0cm;z-index:0;}

Damit wird das unsichtbare Logo positioniert, aber nicht wieder eingeblendet.

Das Einbinden für "screen" erfolgt ohne media-Referenz ...

Also wird die screen.css immer eingebunden, das Logo also immer ausgeblendet.

Wenn du die screen.css immer einbindest, dann must du in der print.css auch alle Formatierungen der screen.css überschreiben, die für den Druck nicht gelten sollen.

Es sollte funktionieren, wenn du in der print.css bei div.logo1 display:block mit angibst.

MFG
Detlef

[alfie]

Hallo Detlef!

...Es sollte funktionieren, wenn du in der print.css bei div.logo1 display:block mit angibst.

Vielen Dank, das war's!

mfg Alfie

[Detlef G.]

Hallo Alfie

Ich habe mir die Seiten nocheinmal angesehen.

Mir gefällt, dass du die Schriftgrößen auf em umgestellt hast, so dass auch im IE eine unproblematische Größenanpassung durch den User möglich ist.
Damit die Schriftgrößenänderung im IE nicht so extrem ausfällt, würde ich dir empfehlen, in der screen.css bei body noch font-size:100.01% anzugeben. (http://www.einfach-fuer-alle.de/artikel/ietext/ und http://news.css-technik.de/comments/335_0_1_0_C/)

Außerdem erlaube ich mir, an dieser Stelle noch einmal auf die notwendigen Mindestbreiten hinzuweisen.(http://forum.de.selfhtml.org/archiv/2004/4/77688/#m448798)

MFG
Detlef

[alfie]

Hallo Detlef!

Ich habe mir die Seiten nocheinmal angesehen.

Oh danke ;-) Ich habe versucht, eure Anregungen umzusetzen.

Mir gefällt, dass du die Schriftgrößen auf em umgestellt hast, so dass auch im IE eine unproblematische Größenanpassung durch den User möglich ist.
Damit die Schriftgrößenänderung im IE nicht so extrem ausfällt, würde ich dir empfehlen, in der screen.css bei body noch font-size:100.01% anzugeben. (http://www.einfach-fuer-alle.de/artikel/ietext/ und http://news.css-technik.de/comments/335_0_1_0_C/)

War mir *so* nicht bewusst (in meinem Testbrowser IE6 SP1 alles ok). Werde ich gleich berücksichtigen.

Außerdem erlaube ich mir, an dieser Stelle noch einmal auf die notwendigen Mindestbreiten hinzuweisen.(http://forum.de.selfhtml.org/archiv/2004/4/77688/#m448798)

Ja, da hast du recht. Ist aber innerhalb der Scripts leider eine "harte Nuss". Ich habe deinen Hinweis nicht vergessen; meine Implementierungsversuche waren bisher nicht cross-Browser tauglich...
Ich arbeite aber daran.

Nochmal Danke!
Alfie

[Cybaer]

Hi,

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

Reihenfolge tauschen! Immer zuerst die print.css einbinden und *anschließend* die screen.css (und darauf achten, daß "neuralgische" Styles in beiden Dateien definiet sind). Sonst überschreibst Du in ein paar älteren Browsern die Styles für den Bildschirm durch die Styles für den Drucker - und das hat schwerwiegendere Effekt, als umgekehrt (wie Du siehst, bzw. nicht siehst). ;-)

Gruß, Cybaer

[alfie]

Hallo!

<link type="text/css" rel="stylesheet" href="./screen.css">
<link type="text/css" rel="stylesheet" href="./print.css" media="print" >
Reihenfolge tauschen! Immer zuerst die print.css einbinden und *anschließend* die screen.css (und darauf achten, daß "neuralgische" Styles in beiden Dateien definiet sind). Sonst überschreibst Du in ein paar älteren Browsern die Styles für den Bildschirm durch die Styles für den Drucker - und das hat schwerwiegendere Effekt, als umgekehrt (wie Du siehst, bzw. nicht siehst). ;-)

Gesagt, getan! Im NS4.75 zwar kein Unterschied, aber zur Sicherheit... ;-)

mfg Alfie

[Cybaer]

Hi,

Gesagt, getan! Im NS4.75 zwar kein Unterschied, aber zur Sicherheit... ;-)

Ich kann es Dir, ohne Test, auch nicht mehr sagen. Seit ich aber mal beim Test mit einem Browser (vermutlich dem IE 4) darüber gestolpert bin, mache ich es nur noch andersherm - kostet ja nix ... ;-)

Gruß, Cybaer

[Detlef G.]

Hallo Cybaer

Hi,

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

Reihenfolge tauschen! ...

Perfekt, damit wird "div.logo1 {... display:block;}" (print.css) wieder durch "div.logo1 {display:none;}" (screen.css) überschrieben und natürlich auch alle anderen Angaben für den Druck.
Ich glaube nicht, dass gelbe Schrift auf weißem Papier optimal ist.

Reihenfolge tauschen, ist _nur_ dann sinnvoll, wenn die screen.css mittels media="screen" eingebunden ist.

MFG
Detlef

[alfie]

Hallo!

Perfekt, damit wird "div.logo1 {... display:block;}" (print.css) wieder durch "div.logo1 {display:none;}" (screen.css) überschrieben und natürlich auch alle anderen Angaben für den Druck.
[...]
Reihenfolge tauschen, ist _nur_ dann sinnvoll, wenn die screen.css mittels media="screen" eingebunden ist.

Korrekt, habe kurz vor deinem Posting wieder alles rückgängig gemacht...

mfg Alfie

[Cybaer]

Hi,

Reihenfolge tauschen, ist _nur_ dann sinnvoll, wenn die screen.css mittels media="screen" eingebunden ist.

Um Himmels Willen: Natürlich! =:-o Ich hatte das Fehlen gar nicht beachtet.

Aber man sollte natürlich media="screen" auch verwenden. Alte Browser überlesen es ja ohnehin ...

Gruß, Cybaer

[alfie]

Hallo!

Aber man sollte natürlich media="screen" auch verwenden. Alte Browser überlesen es ja ohnehin ...

eben nicht (siehe mein Original-Posting [pref:t=79752&m=462223]
Der NS4.7 verwendet dann *gar kein* externes CSS mehr!

mfg Alfie

[Cybaer]

Hi,

eben nicht (siehe mein Original-Posting [pref:t=79752&m=462223]

Ups, sorry. Da war ich nicht aufmerksam genug ... =:-o

Der NS4.7 verwendet dann *gar kein* externes CSS mehr!

OK, aber das ist ja kein "Feature" 4er Netscapes, sondern ein echter Bug.

Gruß, Cybaer