I've got a mockup page but when i'm printing the page the header becomes grey. I used an image because then you don't need to enable background and colors in the printsettings.
When i change the margins in the print settings the color works? Anyone know what is going on here?
My code:
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
<style type="text/css" media="all">
@media print {
.page-break {
height:0;
page-break-before:always;
margin:0;
border-top:none;
}
a.afdrukken {
display: none;
}
}
body, p, span, td, a, h1, h2{
font-size:9pt;
font-family: Arial, Helvetica, sans-serif;
}
body{
margin-left:2em;
margin-right:2em;
text-align:left;
}
.page{
height:917px;
page-break-after : always;
font-family: Arial, Helvetica, sans-serif;
position:relative;
}
.header{
height:50px;
/*background-color:#FF9519;*/
}
.header{
text-align:right;
position: relative;
overflow: hidden;
background-color: #FF9519;
}
.header .website, .header .telefoon, .header .titel{
color:#FFF;
margin-right:10px;
margin-top:10px;
z-index: 100;
position: absolute;
}
.header .website {
color:#FFF;
right: 100px;
}
.header .telefoon {
color:#FFF;
right: 10px;
}
.header .website{
font-weight:bold;
margin-right:10px;
}
.header .website a, .header .website a:visited,.header .website a:hover, .header .website a:active {
color: #ffffff;
text-decoration: none;
}
.header .titel{
color:#FFF;
left: 0;
font-weight:bold;
margin-left:20px;
}
.container{
border-left: 1px solid #FF9519;
}
.content{
width: 75%;
color:#333;
padding:15px;
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
-webkit-column-gap: 30px; /* Chrome, Safari, Opera */
-moz-column-gap: 30px; /* Firefox */
column-gap: 30px;
-webkit-column-rule: 1px outset #FF9519; /* Chrome, Safari, Opera */
-moz-column-rule: 1px outset #FF9519; /* Firefox */
column-rule: 1px outset #FF9519;
}
h1{
margin-left:15px;
margin-bottom:0px;
color: #FF9519;
font-weight:lighter;
font-size:24px;
}
h2{
color:#000;
margin-bottom:15px;
margin-bottom:2px;
}
.inleiding{
font-weight:bold;
}
a.afdrukken {
margin-left: 25px;
font-size: 12px;
color: #333;
cursor: pointer;
}
a.afdrukken img {
border: 0;
}
img.bgImage {
position: absolute;
height: 50px;
width: 2000px;
z-index: 50;
left: 0;
}
.planningTable td {
padding: 3px 15px 3px 0;
}
</style>
</head>
<body>
<form method="post" id="Form1">
<script src="../Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<div class="page">
<div class="header">
<img class="bgImage" src="/images/productblad/CUR_bg.png" alt=""/>
<div class="titel">Cursussen</div>
<div class="telefoon">0000000000</div>
<div class="website"><a href='http://www.google.nl' target='_blank'>www.google.nl</a></div>
</div>
<div class="container">
<h1>Header<a class="afdrukken" onclick="$('.cboxIframe', window.parent.document).get(0).contentWindow.print();"><img src="/Images/icons/printButton.png" alt=""/> Print</a></h1>
<div class="content">
</div>
</div>
</div>
</form>
</body>
