Forum Moderators: open
I have a site I'm building which utilises a print stylesheet to format pages for printing. The 'normal' stylesheets all have media="screen" so they should be ignored by browsers when printing is requested.
IE6 is printing the first page of content on all pages where any web page runs to more than one side of A4 - so effectively if you have a three A4 page print run, all those pages will have the first pages content and miss everything else.
The site uses JQuery powered scripts and initially removing one of those scripts that powered an image gallery seemed to resolve this. However the critical pages that need to be optimised for printing also have the image gallery on them in many cases so this is not a proper solution.
In case it helps here is the image gallery script:
$(document).ready(function(){if($('#gallery').length > 0) {
// Initialise body
$('body').css({opacity: .9999}); /* Fixes Firefox Mac opacity bug */
// initialise main image
$("#gallery li:not(:first)").hide(); /* Hide all but the first image (need for smooth transition) */
$("#gallery li:first").fadeIn("slow"); /* Bring the first gallery image to the front */
// initilase thumbs
$("#thumbnails").css('display', 'block'); /* Show thumbnails (hidden for non JS users) */
$("#thumbnails li:first").addClass("on"); /* Highlight currently active thumbnail */
// initialise gallery nav
$("#gallery-navigation").css('display', 'block'); /* Show thumbnails (hidden for non JS users) */
// condition : more than one thumbnail? show the next arrow
if ($("#thumbnails li").length > 1) {
$("#gallery-navigation li.next").fadeIn("slow"); /* Fade in next arrow */
}
// clicking on thumbnail event
$("#thumbnails li").click(function() {
// Highlight clicked thumbnail
$("#thumbnails li").removeClass("on");
$(this).addClass("on")
.gallery();
});
// clicking on next arrow event
$("#gallery-navigation li.next").click(function() {
// Highlight the next thumbnail
$("#thumbnails li.on")
.removeClass("on")
.next().addClass("on")
.gallery();
});
// clicking on previous arrow event
$("#gallery-navigation li.previous").click(function() {
// Highlight previous thumbnail
$("#thumbnails li.on")
.removeClass("on")
.prev().addClass("on")
.gallery();
});
// load in new gallery state
jQuery.fn.gallery = function() {
// condition : toggle prev/next button states depending on selected thumb
if ($("#thumbnails li.on").is(":last-child")) {
$("#gallery-navigation li.next").fadeOut("fast");
$("#gallery-navigation li.previous").fadeIn("fast");
} else if ($("#thumbnails li.on").is(":first-child")) {
$("#gallery-navigation li.next").fadeIn("fast");
$("#gallery-navigation li.previous").fadeOut("fast");
} else {
$("#gallery-navigation li.next").fadeIn("fast");
$("#gallery-navigation li.previous").fadeIn("fast");
}
// fade in corresponding main image
$("#gallery li")
.fadeOut("slow")
.animate({opacity: 1.0}, 500)
.eq($("#thumbnails li.on").prevAll().length)
.fadeIn("slow");
};
};
});
Stylesheets are called like this:
<link href="../assets/styles/global.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8"/>
<link href="../assets/styles/sections/reviews.css" rel="stylesheet" type="text/css" media="screen" charset="utf-8"/><link href="../assets/styles/print.css" rel="stylesheet" type="text/css" media="print" charset="utf-8"/>
Any help is obviously very much appreciated!
/* GENERAL RULES */body {
background : #FFF;
color : #000;
font-size : 10pt;
font-family : Verdana,Helvetica,sans-serif;
width : 100%;
}
a {
color : #000;
text-decoration : none;
}
a img {
border : none;
}
hr {
display : none;
}
/* Masthead rules and global navigation rules */
#masthead {
border-bottom : 1px solid #000;
padding-bottom: 10px;
width : 100%;
}
#masthead h2,
#masthead em {
display : block;
font-size : 11pt;
font-style : normal;
}
#masthead em span {
display : block;
font-weight : bold;
font-size : 14pt;
margin-bottom: 4px;
}
#masthead ul.topnav,
#masthead ul li.removed {
display : none;
}
#user-controls {
display : none;
}
#tabs {
display : none;
}
ol#breadcrumbs {
margin-bottom : 20px;
overflow : hidden;
margin-left : 0;
padding-left : 0;
}
ol#breadcrumbs li {
background : url(../images/bullets/blt-breadcrumb.png) center right no-repeat;
list-style : none;
float : left;
font-size : 10pt;
margin-right : 10px;
margin-left : 0;
padding-left : 0;
}
ol#breadcrumbs li.first,
ol#breadcrumbs li.last {
background : none;
}
/* Left Sidebar rules */
#sidebar {
display : none;
}
/* Content rules */
#content {
border-bottom : 1px solid #000;
clear : both;
margin-bottom: 10px;
padding-bottom: 10px;
width : 100%;
}
h1 {
font-size : 16pt;
}
h2 {
font-size : 13pt;
}
h3.item-heading strong {
margin-right : 8px;
}
ul {
padding-left : 0;
}
ul li {
margin-left : 20px;
}
.img-full {
margin-bottom: 10px;
}
.img-right {
float : right;
margin : 10px 0 10px 10px;
}
.img-left {
float : left;
margin : 10px 10px 10px 0;
}
/* Footer rules */
#footer ul {
display : none;
}
/* SPECIFIC PAGES */
/* Homepage */
#masthead img.home-header-tr {
display : none;
}
#content #home-row-1 {
display : none;
}
#content #how-to-guides img {
display : none;
}
#content #fragment-1 img,
#content #fragment-2 img,
#content #fragment-3 img {
display : none;
}
#content #carousel-buttons {
display : none;
}
#content #other-services img {
display : none;
}
#content #home-row-2 p.link,
#content #home-row-2 p.more {
display : none;
}
/* Product detail review */
ul#inpage-nav,
ul#inpage-nav-end {
display : none;
}
#product-info li.verdict img {
display : none;
}
#product-info table.standard {
border : 1px solid #000;
margin-bottom: 15px;
}
#product-info table.standard caption,
#product-info table.standard th,
#product-info table.standard td {
border : 1px solid #000;
padding : 3px 5px;
text-align : left;
}
#product-info table.standard caption {
border : none;
font-size : 13pt;
font-weight : bold;
margin-bottom: 10px;
}
#product-info table.standard th img/* , REMOVED THIS RULE AS WON'T DIFFERENTIATE BETWEEN LOGGED IN STAR RATINGS AND LOGGED OUT SUBSCRIBE ICON
#product-info table.standard td img */ {
display : none;
}
/* Product detail results */
#tab-content table.standard {
border : 1px solid #000;
margin-bottom: 15px;
width : 80%;
}
#tab-content table.standard caption,
#tab-content table.standard th,
#tab-content table.standard td {
border : 1px solid #000;
padding : 3px 5px;
text-align : left;
}
#tab-content table.standard caption {
border : none;
font-size : 13pt;
font-weight : bold;
margin-bottom: 10px;
}
#tab-content table.standard th img/* , REMOVED THIS RULE AS WON'T DIFFERENTIATE BETWEEN LOGGED IN STAR RATINGS AND LOGGED OUT SUBSCRIBE ICON
#tab-content table.standard td img */ {
display : none;
}
/* Image gallerys */
#gallery li {
list-style : none;
}
#thumbnails li,
#gallery-navigation li,
#gallery-navigation li img {
display : none;
list-style : none;
}
/* Our verdict pages */
#inpage-sorting {
display : none;
}
/* Product finder comparison table */
#filter-panel {
display : none;
}
div.view-per-page {
display : none;
}
div.pagination {
display : none;
}
#select-for-comparison div.compare-action {
display : none;
}
#select-for-comparison table.results {
border : 1px solid #000;
margin-bottom: 15px;
width : 98%;
}
#select-for-comparison table.results caption,
#select-for-comparison table.results th,
#select-for-comparison table.results td {
border : 1px solid #000;
padding : 3px 5px;
text-align : left;
}
#select-for-comparison table.results th.select,
#select-for-comparison table.results td.select {
display : none;
}
#select-for-comparison table.results caption {
border : none;
font-size : 13pt;
font-weight : bold;
margin-bottom: 10px;
}
