div+img als Briefbogen / Hintergrund, IE ok, FF nicht :s
lordy
- css
0 LX
Hallo miteinander,
unsere Firma hat ein kleines WWS (PHP/SQL) im Einsatz, welches von meinem Vorgänger für die Bedürfnisse und Prozesse an sich ziemlich gut entwickelt wurde - doch bereitet mir die gewünschte Verwendung von Hintergrundbildern für PDF-Drucke einige Probleme.
Unser Briefbogen ist 2.000 x 3.000 Pixel groß, 300 dpi aufgelöst.
Die auszugebenden Daten werden in Tabellen dargestellt (640x960px).
Als Tabellen-Hintergrund kann ich den Briefbogen nicht verwenden, da die Auflösung zu groß ist (Tabelle zeigt nur linkes Drittel der Grafik).
Daher habe ich den Briefbogen per <img>-Tag für jede Seite in ein <div>-Element mit z-index 1 gelegt. Die Tabellen mit allen Ausgaben sind entsprechend in ein <div>-Element mit z-index 2 gefasst worden.
Nun das Problem:
In der Browser-Ausgabe sind IE und FF vollkommen gleich: jede Seite sieht super aus, hat ihren Briefbogen als Hintergrund und stellt die Daten sauber dar.
Nur bei der Druckvorschau und der eigentlichen Druckausgabe unterscheiden sie sich.
IE 7 = alles ok soweit, übergibt Daten und Briefbogen sauber an den PDF-Drucker.
FF 3 = übergibt Daten korrekt an PDF-Drucker, aber den Briefbogen nur bei Seite 1.
Wenn ich im FF die Druckränder nach oben und unten vergrößere, sehe ich in der Druckvorschau den Kopf des Briefbogens von Seite 2 am Ende von Seite 1.
Er wird also "nur" falsch positioniert - statt auf Seite 2 (u.f.) angezeigt zu werden, reiht der FF alle Briefbögen unter den nicht mehr druckbaren Bereich von Seite 1.
Wie kriege ich nun beide Browser dazu, auf jeder Seite den Briefbogen als druckbares Hintergrund-Element einzubinden? Die Anzeige ist ja schon ok, nur das Drucken klappt nicht :-/
Folgend ein paar Code-Schnipsel, die meinen Aufbau zeigen:
<html> <head> <body> etc...
(Schleifendurchlauf für alle generierten Seiten)
{
<div style="position:absolute; z-index:1; left:0px; top:0px;">
<img src="briefbogen.gif" width="640" height="960" border="0" alt="">
</div>
<div style="position:absolute; z-index:2; left:0px; top:0px;">
<table class="w640 h960" cellspacing="0" cellpadding="0" border="0">
...content...
</table>
</div>
}
... </body> </html>
Enthält der HTTP_USER_AGENT *firefox*, gibt das Script zusätzlichen CSS Befehl aus: * { overflow: visible !important; }
(wenn ich diesen entferne, druckt der FF immer nur Seite 1, egal wie lang sie eigentlich sein sollte)
Die verwendete style.css enthält außer Klassen für Schriften, Größen und Formatierungen keinerlei besondere Definitionen.
Ich hoffe, dass ich das Problem einigermaßen verständlich beschreiben konnte - und dass jemand Tipps oder eine Lösung für mich parat hat :-)
TIA + Grüße
lordy
An der Stelle ist ein repeat-y
keine schlechte Idee. Allerdings wäre es langfristig vielleicht eine gute Idee, die Druckausgabe über das WWS bspw. mittels libPDF zu erstellen, statt sie dem Browser zu überlassen.
Gruß, LX