Christian Walgenbach: CSS Druckvorschau

Beitrag lesen

Hallo,

habe eine CSS für den Bildschirm und für den Drucker erstellt.
Dann habe ich das Querformat für den Drucker eingestellt. Bei Firefox funktioniert alles tadellos. Nur der IE6 nimmt das Querformat nicht und die Spalte Artikelbezeichnung ist etwas abgeschnitten.

Hier der Quelltext:

Viele Dank schon im Voraus.

by Christian

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
<title>Die CampingKiste</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css" media"screen">
body{
color:black;
background:#f4f9f2;
padding:0;
margin:0;
font:13px verdana, sans-serif;
text-align:justify;}

#head{
width:100%;
position:absolute;top:0;left:0;
padding:40px 0 2px 0;
margin:0;
color:white;
background:transparent;
border-bottom:1px solid black;}
#head h1{
padding:5px;
margin:0;
color:white;
background:#B7B1F5;
font:bold 18px verdana, sans-serif;
border-top:1px solid black;
border-bottom:1px solid black;}

#menu{
float:right;
width:110px;
background:#B7B1F5;
padding:0 5px 50px 5px;
margin:90px 10px 0 0;
border:1px solid black;}
#menu ul{
padding:0;
margin:0 0 20px 0;
list-style:none;
text-align:right;}
#menu li{
padding:0 0 2px 0;}
#menu a{
color:white;
background:#6254E4;
display:block;
width:100px;
padding:2px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menu a:hover{color:#008000;background:#e3eedd;}
#menu p{
font:bold 12px verdana, sans-serif;
text-align:center;
padding:5px;
margin:0;}

#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border-left:1px solid black;
border-right:1px solid black;}
#content h2{
margin:0 0 10px 0;
padding:2px 0 2px 5px;
font:bold 18px verdana, sans-serif;
#content h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:8px solid #9bc88c;
border-bottom:1px solid #9bc88c;}
#content h4{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 12px verdana, sans-serif;
border-left:6px solid #9bc88c;
border-bottom:1px solid #9bc88c;}

#foot{
clear:right;
color:white;
background:#9bc88c;
padding:5px 30px 5px 0;
margin:0;
font:bold 12px verdana, sans-serif;
text-align:right;
border-top:2px solid black}
#foot p{margin:0;padding:0;}

}
</style>

<style type="text/css" media="print">

@page { size: landscape;}
#menu {display:none;}
#head {display:none;}
#foot {display:none;}
#content{
color:black;
padding:110px 30px 30px 30px;
margin:0 160px 0 20px;
background:#e3eedd;
border: none;
width:100%;}
</style>
</head>
<body>
<div id="head">
<h1>Die CampingKiste</h1>
</div>

<div id="menu">
<p>Menu:</p>

<ul>
 <li><a href="index.php?seite=versandliste.php">Versandliste</a></li>
 <li><a href="index.php?seite=versanddatum.php">Versanddatum</a></li>
</ul>

</div>

<div id="content">

<h2>Versandliste</h2>

<table border='1'>
<td><b>Renr.</b></td><td><b>Vorname</b></td><td><b>Nachname</b></td><td><b>Strasse</b></td>
<td><b>PLZ</b></td><td><b>Ort</b></td><td><b>Artikelnr.</b></td><td><b>Menge</b></td><td><b>Artikelbezeichnung</b></td>
<tr>
<td>240002</td><td>Franz-Josef</td><td>Rasche</td><td>Schmerlecker Dorf 25</td><td>59597</td><td>Erwitte</td><td>N22.0111.00</td><td>1.000</td><td>230 Volt Keramik Heizung</td></tr>
<tr>
<td>240003</td><td>Alfred</td><td>Kandziora</td><td>Südallee 2</td><td>49716</td><td>Meppen</td><td>F136102</td><td>1.000</td><td>Alu-Stützbock-Set</td></tr>
<tr>
<td>240004</td><td>Sönke</td><td>Kahrs</td><td>huttfletherweg 4</td><td>21720</td><td>steinkirchen</td><td>N22.4387.00</td><td>1.000</td><td>12 V Keramik-Heizlüfter</td></tr>
<tr>
<td>240005</td><td>Kathrin</td><td>Dietzsch</td><td>Kranichweg 12</td><td>18356</td><td>Barth</td><td>N22.4387.00</td><td>1.000</td><td>12 V Keramik-Heizlüfter</td></tr>
<tr>
<td>240006</td><td>Matthias Trunk</td><td>PROFICOM GmbH / Hr. Trunk</td><td>Zeppelinstraße 43a</td><td>97074</td><td>Würzburg</td><td>N22.0111.00</td><td>1.000</td><td>230 Volt Keramik Heizung</td></tr>
</table>

</div>

</body>
</html>