Christian Walgenbach: Media Print/Screen

Beitrag lesen

Hallo,

habe ein 3-Spalten-Layout und dort unter content eine Tabelle.
Diese soll per @media=print besser für den Ausdruck dargestellt werden. menu,head,foot habe ich schon ausgeblendet. Ich bekomme nur die beiden Linien unter content nicht weg. Diese werden in der Druckvorschau immernoch angezeigt. Was mache ich da falsch?

Hier mein Code:

<!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="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;  
</style>  
  
<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>  
</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">  
  
<?  
if (isset($_GET['seite']))  
{  
include($_GET['seite']);  
}else{include("versandliste.php");}  
  
?>  
  
</div>  
  
  
</body>  
</html>