• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox-Problem mit print.css

S

Smarthie

Neues Mitglied
Hallo alle zusammen,

ich habe folgendes Problem mit dem Firefox und hoffe ihr könnt mir möglichst schnell behilflich sein.

Ich erstelle gerade eine print-CSS-Datei zum Ausdrucken einer ganz normalen HTML-Seite. Leider zeigt mir der Firefox lediglich die erste Seite an und schneidet die restlichen komplett ab. (Explorer und Opera funktionieren einwandfrei.)

Ich habe bereits in einigen Foren gelesen; aber den Vorschlag, das
overflow:hidden in ein overflow:visible zu ändern, hat leider nicht funktioniert. Stattdessen wurde jeweils an die erste und letzte Stelle noch eine leere Seite gehängt, so dass ich unnötig 2 weiße Seiten mit ausdrucke.

Code: 
[SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]@media[/COLOR][/SIZE]
[LEFT][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]print[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [B]{[/B][/SIZE][/LEFT]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#fullBanner[/COLOR][/SIZE][/COLOR][/SIZE]
[B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#navi[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#skyscraper[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#altBanner[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentLeft[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].footerNavi[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentBottom[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#richmedia[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentLeft[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].quickLinks[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentLeft[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].socialBookmarks[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentLeft[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].searchBox[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentRight[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#richmedia[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#contentLeft[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].footerList[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#footer[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [B]{[/B][/SIZE]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]display[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]none[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[B][SIZE=2]}[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#BTOArtikel[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][B]{[/B][/SIZE]





[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]margin[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]10px[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]10px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]overflow[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]hidden[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]width[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]100%[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[B][SIZE=2]}[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#container[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][B]{[/B][/SIZE]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]position[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]static[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]width[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]100%[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[B][SIZE=2]}[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]#main[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][B]{[/B][/SIZE]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]margin[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]15px[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]position[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]static[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[B][SIZE=2]}[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]*html[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].txt[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [B]{[/B][/SIZE]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]width[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]100%[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]margin[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]25px[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]25px[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]0[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B]
[B][SIZE=2]}[/SIZE][/B]
[B][SIZE=2]*[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]html[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff].txt [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]p[/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2] [B]{[/B][/SIZE]
[LEFT][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]font[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]:[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]13px[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2]/[/SIZE][/B][SIZE=2][COLOR=#0000ff][SIZE=2][COLOR=#0000ff]15px [/COLOR][/SIZE][/COLOR][/SIZE][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]arial[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2],[/SIZE][/B][SIZE=2][COLOR=#a31515][SIZE=2][COLOR=#a31515]sans-serif[/COLOR][/SIZE][/COLOR][/SIZE][B][SIZE=2];[/SIZE][/B][/LEFT]

[SIZE=2][B]}[/B][/SIZE]
[B][SIZE=2]}[/SIZE][/B]

Habt ihr noch einen Tipp?

Wäre toll...​
 
Hi,

overflow:hidden in dem Zusammenhang in einer print.css zu verwenden ist überhaupt keine gute Idee.

Warum willst du für die print.css einen derartigen "Block Formatting Context" definieren? Noch dazu einen der dir höchstens was versteckt.

Die Browser verhalten sich bei der overflow-Eigenschaft öfter mal uneinheitlich, was an der nicht eindeutigen Definition in der Spezifikation liegt.

Das:
HTML: 
margin:10px0010px;
margin:25px025px0;

ist leider falsch.

Da fehlen die Leerstellen:
HTML: 
margin:10px 0 0 10px;
margin:25px 0 25px 0;

Was das soll:
HTML: 
@media
print {
#fullBanner
,#navi,#skyscraper,#altBanner,#contentLeft.footerNavi,#contentBottom,#richmedia,#contentLeft.quickLinks,#contentLeft.socialBookmarks,#contentLeft.searchBox,#contentRight,#richmedia,#contentLeft.footerList,#footer {
display:none;
}

kapiere ich auch nicht so recht.
Das Element @media print ist mir unbekannt.

Gib doch mal einen Link zur Seite, dann kann man mehr sagen. :wink:
 
Hey koslowski,

danke für die schnelle Antwort.

Also, du kannst dir mal den folgenden Link anschauen. Wenn du bei dem folgenden Artikel (Rheuma: Rheuma-Kranke berichten von ihrer Krankheit - Ratgeber - Bild.de) im Firefox auf den Druckbutton gehst und dann eine Vorschau machst, dann siehst du nur die erste Seite.

Den Tipp mit dem overflow:hidden habe ich sehr häufig gelesen und deswegen einfach mal ausprobiert. Aber danke für den Hinweis.

Mit dem
HTML: 
@media
print {
#fullBanner
,#navi,#skyscraper,#altBanner,#contentLeft.footerNavi,#contentBottom,#richmedia,#contentLeft.quickLinks,#contentLeft.socialBookmarks,#contentLeft.searchBox,#contentRight,#richmedia,#contentLeft.footerList,#footer {
display:none;
}
habe ich lediglich unnötige Elemente auskommentiert. Ist glaube ich für meine Fehlerquelle gerade nicht relevant...



Übrigens habe ich das
HTML: 
margin:10px 0 0 10px;
margin:25px 0 25px 0;
nur falsch gepostet gehabt. Natürlich sind ordentliche Leerzeichen da drin :D
 
Hi,

Smarthie schrieb:
Also, du kannst dir mal den folgenden Link anschauen. Wenn du bei dem folgenden Artikel (Rheuma: Rheuma-Kranke berichten von ihrer Krankheit - Ratgeber - Bild.de) im Firefox auf den Druckbutton gehst und dann eine Vorschau machst, dann siehst du nur die erste Seite.
Zum Vergrößern anklicken....

du bist der Webdesigner der Bildzeitung?? :shock:

Smarthie schrieb:
Mit dem
HTML: 
@media
print {
#fullBanner
,#navi,#skyscraper,#altBanner,#contentLeft.footerNavi,#contentBottom,#richmedia,#contentLeft.quickLinks,#contentLeft.socialBookmarks,#contentLeft.searchBox,#contentRight,#richmedia,#contentLeft.footerList,#footer {
display:none;
}
habe ich lediglich unnötige Elemente auskommentiert. Ist glaube ich für meine Fehlerquelle gerade nicht relevant...
Zum Vergrößern anklicken....

Das wäre ich nicht so sicher.

@media print ist kein Element.
Du öffnest das durch { aber schließt es nicht mehr.
Bei einem Dreispaltenlayout wird ja meistens alles bis auf den Contentbereich auf display:none; gesetzt.

Brauchst du an einer bestimmten Stelle einen Seitenumbruch wird das in der print.css z.B. mit page-break-after.

Ist die Seite allerdings mit Frametechnik erstellt worden kann ich dir leider nicht helfen.
Diese Technik ist sowas von Uralt und megaout, das war vor meiner Zeit. :wink:
 
Problem gelöst

Ich konnte das Problem beheben :D

Für diejenigen, die es interessiert:
Da mehrere css-Datein in der HTML-Seite eingebunden waren, störte die print.css das overflow: hidden in der Haupt-CSS-Datei. Dieser Befehl war sowohl #contentLeft, als auch #contentRight zugewiesen.

Diese Einstellung musste in der print.css mit overflow: visible wieder aufgehoben werden. Außerdem habe ich overflow: hidden in dieser Datei entfernt.

Bis zum nächsten Problem :wink:
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben