archivierte Beiträge lesen
- (CSS) Links in Mozilla-Print. Und was macht Opera? von Hartmut, 04. 11. 2005, 04:16
Links in Mozilla-Print. Und was macht Opera?
Der folgende Beitrag wurde am 04. 11. 2005, 04:16 Uhr von Hartmut veröffentlicht.
Hallo,
ich habe 3 Probleme (Höchstwahrscheinlich CSS).
Die Seite wird in
- lynx
- msie 6 (screen und druckvorschau)
- mozilla 1.7 (screen)
- firefox 1.07 (screen)
- netscape 7.1 (screen)
korrekt angezeigt.
bei Mozilla/Firefox/Netscape(neu) habe ich ein Problem mit der Darstellung von Links in der Druckvorschau/version:
Diese sind irgendwie nach links verschoben und überlappen mit dem vorhergehenden Text. Außerdem geht die underline rechts nicht bis zum Ende des Textes. Woran liegt das? Was kann ich tun um die Überlappung zu verhindern und einen korrekten Wortabstand zu erhalten (ohne das sich dies auf die anderen Browser auswirkt)?
In Opera 7 verstehe ich so einiges nicht. Es sieht irgendwie aus, als ob Opera sich eine Mix aus screen.css und print.css zusammenläd und nur noch den Text darstellt. Was passiert da? Aber selbst da stimmen die Abstände weder mit denen in in print.css noch screen.css definierten überein. Dabei dachte ich zumindest beim Print, dass Opera ab 7 gut funktioniert.
Außerdem habe ich noch eine Frage die sich auf Netscape 4.8 bezieht.
Ich habe das Logo oben in zwei Versionen eingebaut. Eine für den Bildschirm. Eine hochaufgelößte s/w für den Druck. Der div-Container in dem sich die gerade nicht genutzte Grafik befindet wird mit display: none; ausgeblendet.
Im alten NC werden allerdings beide Grafiken angezeigt. Wenn ich die anzeige der Printgrafik direkt im HTML auf none setze, dann habe ich das Problem, dass mir nicht bekannt ist wie ich dieses Element im Print-Style wieder auf block schallten kann. Der direkte Style im Element ist so natürlich höherwertig als der im externen style. Kennt Ihr eine Lösung?
Was an Funktionalitäten auf jeden Fall erhalten bleiben muss ist das beim msie das outline-logo unten rechts stehen bleiben soll, auch wenn gescrollt wird. Außerdem sind einige Elemente von der Schriftgröße abhängig.
Mit bestem Dank schon mal
Der Hartmut
__
Dateien:
http://www.onsign.de/test.html
http://www.onsign.de/screen.css
http://www.onsign.de/druck.css
http://www.onsign.de/low.css
http://www.onsign.de/fixed4all.css
http://www.onsign.de/fixed4ie.css
Links in Mozilla-Print. Und was macht Opera?
Der folgende Beitrag wurde am 04. 11. 2005, 18:11 Uhr von frankx veröffentlicht.
Hallo Hartmut,
mein Vorschlag: grenze Dein Problem ein und nutze die o.g. Möglichkeit, Links zu setzen. Besser den Quellcode auf das Problem reduzieren und ausschnittsweise posten.
Gruß, Frankx
Links in Mozilla-Print. Und was macht Opera?
Der folgende Beitrag wurde am 04. 11. 2005, 19:07 Uhr von Hartmut veröffentlicht.
Hallo Frankx,
> .. grenze Dein Problem ein [...] Besser den Quellcode auf das Problem reduzieren und ausschnittsweise posten.
Danke für den Hinweis.
Werde ich morgen versuchen. Habe gleich noch einen Termin
> nutze die o.g. Möglichkeit, Links zu setzen. »»
Wo ist hier oben. Bzw. wo steht mit welche Syntaxmöglichkeiten mir dieses Formular bietet? Danach hatte ich schon gesucht.
Danke erstmal
Der Hartmut
Links im Druck bei Gecko-Browsern. (Bug?)
Der folgende Beitrag wurde am 05. 11. 2005, 05:15 Uhr von Hartmut veröffentlicht.
Hallo Frankx,
> mein Vorschlag: [...] den Quellcode auf das Problem reduzieren und ausschnittsweise posten.
Danke für Hinweis und Link. Ich hoffe jetzt wird es Übersichtlicher.
Hallo alle,
unter test2.html habe ich den Code mal gekürzt und ohne css eingesetzt. Trotzdem gibt es unter allen (zumindest auf dem PC) vorhandenen Browsern mit Gecko-Engine ein Darstellungsproblem bei Links in der Druckervorschau. In MSIE und Opera (PC) sieht es wie am Bildschirm korrekt aus.
Der Codeausschnitt:
... mit <a href="#">Textinformationen</a>. Dies ...
Wird in der Druckervorschau von z.B. Netscape 7.1 folgendermaßen angezeigt:
Der (Papier-)Ausdruck scheint vom Druckertreiber abzuhängen.
Mein PDF-Druckertreiber und der Lexmark X84 zeigen den Link, wie vom Source zu erwarten, korrekten an.
Auf dem HP-LaserJet 4 sieht es hingegen folgendermaßen aus:
---
In der aktuellen Version der Seite (test1.html) mit Stylesheets
druck.css (Ausschnitt):
a {
color: red;
background-color: white;
text-decoration: underline;
}
.text a:link {
color: red;
background-color: white;
text-decoration: underline;
}
.text a:visited {
color: red;
background-color: white;
text-decoration: underline;
}
.text a:hover {
color: red;
background-color: white;
text-decoration: underline;
}
.text a:active {
color: red;
background-color: white;
text-decoration: underline;
}
screen.css (Ausschnitt):
.text a:link {
color: #7a8077;
background-color: #dddedc;
text-decoration: none;
border-bottom: 1px solid #7a8077;
}
.text a:visited {
color: #7a8077;
background-color: #dddedc;
text-decoration: none;
border-bottom: 1px dashed #7a8077;
}
.text a:hover {
color: #ff7100;
background-color: #dddedc;
text-decoration: none;
border-bottom: 1px solid #ff7100;
}
.text a:active {
color: #ff7100;
background-color: #dddedc;
text-decoration: none;
border-bottom: 1px solid #ff7100;
}
gibt es in der druck.css für Links keine paddings, margins oder border.
Trotzdem zeigt sich gegenüber der Druckvorschau ohne .css-Dateien ein anderes Bild:
Im Papierausdruck zeigt die Version mit .css-Dateien aber - zumindest bei mir - auf Lexmark und PDF korrektes Verhalten und auf dem HP LJ4 nahezu korrektes (minimale Verschiebung des Linktextes nach rechts). Allerdings scheinen beim HP-Ausdruck auch nicht die underline vom druck.css, sondern die border-bottom des screen.css genutzt zu werden (schon verfolgte Links sind dashed):
In allen anderen von mir getesteten Browsern (bisher nur PC) stimmt Bildschirmdarstellung, Druckvorschau und Papierausdruck mit dem vom Code zu erwartenden Verhalten überein.
Ist dies ein bekannter Fehler der Gecko-Browser? Wenn nicht muß dies als Bug gemeldet werden? Gibt es ein Workarround welches Nicht-Gecko-Browser nicht beeinflußt?
Einen schönen Samstag wünscht Euch
Der hartmut
padding-right=Abstand nach unten; border=Blockelement (NC4)
Der folgende Beitrag wurde am 05. 11. 2005, 07:27 Uhr von Hartmut veröffentlicht.
Hallo nochmal,
nachdem das Absenden grad' erst nicht klappte hab ich das Formular nochmals ausgefüllt. Dabei habe ich vergessen die Headline anzupassen.
siehe http://forum.de.selfhtml.org/?t=118082&m=757124
Entschuldigt bitte
Hartmut
Wie überschreibt man <div style="display:none;"> wieder?
Der folgende Beitrag wurde am 05. 11. 2005, 07:55 Uhr von Hartmut veröffentlicht.
Hallo,
und hier mein drittes noch nicht gelößtes Problem:
im HTML-Body:
<div id="test" style="display:none;"><img src="..."></div>
In der Style-Definition:
div#test {
display: block;
}
Wie muß der selector aussehen, damit ich die direkte style-Zuweisung zum Ausschalten des div-Containers wieder aufheben kann.
Oder ist der selector schon OK und ich muß mit inherit oder !important arbeiten um die höhere Spezifität direkt im HTML-Element aus der (externen) Style-Definition heraus zu umgehen?
Ich hoffe ich konnte Deutlich machen, worum es mir geht.
Schöne Grüße
Der Hartmut
Wie überschreibt man <div style="display:none;"> wieder?
Der folgende Beitrag wurde am 05. 11. 2005, 13:40 Uhr von frankx veröffentlicht.
Hallo Hartmut,
Deine eigene Antwort mit important klingt doch sehr interessant und funktioniert auch.
Ich vermute mal, Dein Kenntnisstand übersteigt meinen, dennoch die Frage, warum Du überhaupt einen style "vor Ort" im Elemente-Tag angibts?
Gruß, Frankx
Teilfrage beantwortet, Danke. / Neue Frage
Der folgende Beitrag wurde am 05. 11. 2005, 19:55 Uhr von Hartmut veröffentlicht.
Hallo Frankx,
> Deine eigene Antwort mit important klingt doch sehr interessant und funktioniert auch.
Danke für den Hinweis. Hab damit noch nicht gearbeitet und da ich das Ergebnis ggf. nicht sehen kann (s.u.) wollte ich das vorher est mal abchecken.
> Ich vermute mal, Dein Kenntnisstand übersteigt meinen,
Das glaube ich nicht, aber auf Grund unterschiedlicher Erfahrungen mit bisherigen Arbeiten sind die Kenntnissstände nun mal - Gott sei Dank - nicht deckungsleich.
Wenn es anders wäre, würde das Forum ja auch nicht so häufig genutzt werden. Wenn es nur Lehrmeister gibt und andere die noch nicht so weit sind wäre das ja immer recht einseitig und für die Meister ziemlich uninteressant; Nur geben, nie nehmen. Glücklicherweise ist das nicht so und jeder profitiert vom Forum.
Hallo alle,
> dennoch die Frage, warum Du überhaupt einen style "vor Ort" im Elemente-Tag angibts?
Wie beschrieben habe ich im HTML zwei Versionen der Logo-Grafik eingebaut. Eine hochaufgelöste s/w für die Druckversion. Eine farbige für den Bildschirm.
Wie Du aus dem ursprünglichen Problem weißt hatte ich zunächst die geräteabhängigen Styles vorher per <style type="text/css" media="..."> @import "..."; </style> eingebaut. Bis ich herausgefunden habe, dass in den bei mir vorhandenen Browsern das Problem gelöst ist, wenn man die geräteabhängigen Styles per <link rel="stylesheet" media="..." href="..."> einbindet.
Als Effekt zeigte sich vorher beim Opera das scheinbar alle Styles geladen/interpretiert wurden und alle Elemente die irgendwo per style="display: none; ausgeblendet hatte (alles außer dem Haupttext) nicht mehr sichtbar waren (vor allem auch am Bildschirm).
Beim alten Netscape war es umgekehrt. Hier wurden beide Logo-Grafiken angezeigt.
Dieses Problem ist für die bei mir vorhandenen Browser mitlerweile ja gelößt. Da man (frau natürlich auch) aber nie genau weiß auf welcher Plattform und mit welchem Client immer noch ähnliche Effekte auftreten möchte ich gern die Duck-Grafik zunächst unsichtbar machen. Wenn ein Browser die externen Styles nicht versteht, kann es höchstens passieren, dass im Druck nur die Bildschirm-Grafik erscheint.
Uralte Browser die kein css interpretieren zeigen natürlich nach wie vor beide Grafiken an.
Oder kennt hier jemand eine Idee um auch dieses Problem zu lösen? Zu einer per Style eingebundenen Hintergrundgrafik wollte ich die Druckgrafik nicht machen, da ich davon ausgehe, das bei den meisten Nutzern der Hintergrund nicht mitgedruckt wird. Oder gibt es eine css-Eigenschaft mit der ich Grafiken per css in den Vordergrund laden kann, welche dann möglichst auch in allen Browsern die css verstehen funktioniert?
Besten Dank
Der Hartmut
Links in Mozilla-Print. Und was macht Opera?
Der folgende Beitrag wurde am 04. 11. 2005, 18:53 Uhr von Hartmut veröffentlicht.
Hallo,
zu http://www.onsign.de/test.html .
Es existieren weiterhin Probleme (s.u.)
Ich habe das Opera/Netscape(alt)-Problem lösen können:
Durch einbinden der geräteabhängigen Styles per
<link rel="stylesheet" media="screen" href...">
statt vorher per
<style type="text/css" media="screen"><!--
@import "...";
// --></style>
Die Druckvorschauprobleme beim Opera haben ich durch zusätzliches
entfernen aller Positions- und Größenangaben außer width
im print-style beseitigen können.
Lediglich der alte Netscape kann natürlich den speziellen print-style nicht nutzen und stellt die Bildschirmdarstellung auf die Druckseite um. Sieht zwar nicht besonders aus (Breite der Navigationsspalte), aber noch in Ordnung.
vvv NOCH NICHT GELOESSTE PROBLEME vvv
Problem mit der Link-Darstellung im Druck bei allen Browsern mit Gecko-Engine.
Irgendwie werden in der Seite bei allen Links in der Druckversion die Seitenabstände verringert. Dies führt dazu, dass der jeweilige Link das vorhergehende Wort überdeckt. In anderen Browsern und in der Screen-Version tritt dieses Problem nicht auf. Wer kann helfen und weiß woran es liegt/liegen könnte?
Im Netscape(alt) entsteht ein neuer Bug. Durch kenntlich machen des aktuellen Menüpunktes mit border-right und padding-right. Nicht nur, dass der Border im alten Netscape nicht dargestellt wird (kein Problem). Zusätzlich führt das padding-right setzen irgendwie zu einem einzeiligem Abstand nach unten (nicht 0.3em zur Seite wie gewünscht). Weiß jemand abhilfe?
Außerdem: Selbst wenn das Problem hier nicht mehr Auftritt. Gibt es eine Möglichkeit aus einer externen style-Datei heraus ein vorher in einem HTML-Element gesetztes style="display:none" wieder Rückgängig zu machen? Oder heißt im Element gesetzt automatisch höchste Priorität/Spezifität des entsprechenden Stils?
Kann ich das vielleicht mit inherit oder !important umgehen?
Schönen Abend
Der Hartmut
___
Dateien:
http://www.onsign.de/test.html
http://www.onsign.de/screen.css
http://www.onsign.de/druck.css
http://www.onsign.de/low.css
http://www.onsign.de/fixed4all.css
http://www.onsign.de/fixed4ie.css
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4
