Printing my HTML calendar table in Chrome results in a perfect display. However, when I try to print it in IE8, the background colors and images are not included. Despite following steps from a helpful post on setting it as the default option, there were no changes at all.
The CSS styles seem to be applied correctly because the borders, widths, heights, alignments, fonts, and text colors of the table, td, and tr elements are printed accurately in Chrome. But, outlines, images, and background colors are being ignored. I have checked my printer options in IE8 settings multiple times and restarted the browser, but the issue persists.
UPDATE:
I discovered that I need to specify my color preferences in two places for IE8 to recognize them properly. One of the solutions can be found here: http://support.microsoft.com/kb/974128. However, this only fixed the colors issue, not the outline-borders between the cells...
Below is the code snippet used to initiate the printElement function.
function printCalendar(){
$('#printable').printElement({
overrideElementCSS:['../css/calendarprintstyle.css'],
printBodyOptions:{ pageTitle:'calendar'}
});
}
The element with id #printable contains a div wrapping a table.
Here is an example of some CSS code that's causing trouble. The outline and backgroundbackground-color
table{
display: table;
border-collapse: collapse;
border-spacing: 0px;
border-color: black;
table-layout: fixed;
font-family: arial;
font-size: 12px;
}
th{
background-color:blue;
color:white;
font-weight: bold;
outline: 1px solid black;
}
td, tr{
height: 20px;
max-height: 20px;
padding: 0px;
}
.calendar {
border: 2px solid black;
table-layout: fixed;
white-space: nowrap;
overflow:hidden;
float: center;
}
.calendarcell {
outline: 1px solid black;
height: 20px;
white-space: nowrap;
overflow:hidden;
max-height: 20px;
width: 180px;
max-width: 180px;
}
.datedatacell {
outline: 1px solid black;
width: 20px;
min-width: 20px;
max-width: 20px;
border-left: 2px;
text-align: center;
}
.holidaystyle {
background-color: #f00;
color: #fff;
outline: 1px solid black;
}
everydaystyle {
background-color: #fff;
color: black;
}