Print stylesheet and Google Chrome

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Print stylesheet and Google Chrome

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> Cascading Style Sheets and Accessibility >> Print stylesheet and Google Chrome

Page: [1]

womble

Posts: 5972
Joined: 3/14/2005
From: Living on the edge
Status: offline

Print stylesheet and Google Chrome - 6/8/2009 17:59:25

Anyone (apart from me?

) using Google Chrome?

I recently finished a site and while testing the print stylesheet discovered a problem (with the print stylesheet only) on Google Chrome.

The stylesheet validates and works fine in all the other browsers, but in Chrome the two column design prints with one column under the other. Without the stylesheet Chrome prints as expected with the columns side by side, but I can't find anything that could be causing it, and even IE (

) works okay.

On the grounds that (probably) the number of people using Chrome and wanting to print pages from that particular site will be small, I went ahead and published the site, but why it's not printing as expected in Chrome is puzzling me, and I've tried all sorts of variations on the column widths, but nothing makes any difference .

This is the site: http://www.iihweekender.org.uk/ and this is the stylesheet:

/************GENERAL STYLES **********/

* { padding: 0; margin: 0 auto; }

body { width: 100%; margin: 0 auto; text-align: center; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 12pt; background-color: #fff; color: #000; }

#container { width: 100%; background-color: #fff;  margin: 0 auto; }

.centre { margin: 0 auto;  text-align: center; }

a { text-decoration: underline; color: #000099; }

a:visited { text-decoration: underline; color: #990099; }

img.left, img.left a { float: left; margin: 10px; clear: none; border: none; }

img.right, img.right a { float: right; margin: 10px; clear: none; border: none; }

img.left_border { float: left; margin: 10px; clear: none; padding: 5px; border: 1px solid #4A4A4A; }

img.right_border { float: right; margin: 10px; clear: none; padding: 5px; border: 1px solid #4A4A4A; }

img.left_icon { margin: 2px; padding: 0px; float: left; clear: none; }

img.right_icon { margin: 2px; padding: 0px; float: right; clear: none; }

cite.credit { float: left; margin: 5px; }

/*********** HEADER STYLES ************/

#quicklinks { display: none; }

#header { width: 100%; height: 100pt; margin-bottom: 8pt; }

#header_left { width: 100%; }

#header_right { display: block; }

#header_left #title { height: 26pt; float: left; text-align: left; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; margin: 20pt 0px 0px 6pt; }

#header_left #title h1 { font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: normal; font-size: 20pt; margin-left: 0px; margin-bottom: 12pt; font-weight: bold; }

p.tagline { color: #000; font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 14pt; font-weight: normal; font-style: normal; margin: 10pt 0pt; }

#menu { display: none; }

/************* PAGE CONTENT *****************/

#quotes { width: 100%; display: none; }

#pagecontent { width: 100%; background-color: #fff; padding-bottom: 15pt; }

#page { width: 100%; background-color: #fff; }

#page h3 { background-color: #fff; text-transform: uppercase; font-size: 14pt; background: none; font-weight: bold; color: #000; line-height: 24pt; margin-bottom: 6pt; }

h6 { font-family: Verdana, Helvetica, Arial, sans-serif; font-size: 11pt; color: #000; text-transform: uppercase; margin: 6pt 5pt 5pt 3pt; }

/*two column styles*/

#page #two_column { width: 60%; background-color: #fff; float: left; line-height: 1.3em; text-align: left; padding-left: 10px; margin: 0px 1px; }

#page #two_column ul { list-style: none; padding-left: 14px; color: #000; font-size: 12pt; }

#page #two_column ul li ul { list-style: none; padding-left: 0px; }

#page #two_column ul li { padding-left: 15px; background: url(../images/arrow.gif) no-repeat 0px 6px; text-align: left; margin: 2px 0px -1px; }

#page #two_column ul li a { color: #6F9CC6; text-decoration: none; font-weight: normal; line-height: 20px; font-size: 13px; }

#page #two_column ul li ul li ul a { color: #000; text-decoration: none; font-size: 12pt; line-height: 12px; font-weight: normal; }

#page #two_column ul a:hover { text-decoration: underline; }

#page #two_column p { margin: 13px 11px 0px; text-align: left; margin: 14px 25px 0px 3px; color: #000; font-size: 12pt; clear: none; }

#page #two_column h4 { color: #F6B601; font-size: 14pt; margin: 8px 0px -4px 3px; text-align: left; line-height: 30pt; font-weight: bold; }

#page #two_column span { color: #F6B601; }

#page #two_column span.bold { font-weight: bold; color: #4A4A4A; }

.boldhead { color: #000; font-size: 14pt;  margin: 20px 0px -4px 2px; text-align: left; line-height: 30px; font-weight: bold; }

#page #two_column .ads { display: none; }

/*end of two column styles*/

#thisyear { height: 165px; margin: 0; padding: 0; }

#page #thisyear h3.dates { position: relative; top: 50px; left: 55px; left: 65px; width: 510px; font-family: Verdana, Helvetica, Arial, sans-serif;  font-weight: bold;  font-size: 17px;  color: #000;  background-image: none;  background-color: transparent; }

#page #thisyear h4.place { position: relative; top: 50px; left: 150px; width: 510px; font-family: Verdana, Helvetica, Arial, sans-serif;  font-weight: bold;  font-size: 15px;  color: #000;  background-color: transparent; }

#page #column1 { width: 316px; float: left; line-height: 15px; }

#page #column1 ul, #page #column2 ul, #page #column3 ul { list-style: none; padding-left: 14px; }

#page #column1 ul li ul, #page #column2 ul li ul, #page #column3 ul li ul { list-style: none; padding-left: 0px; }

#page #column1 ul li, #page #column2 ul li, #page #column3 ul li { padding-left: 15px; background: url(../images/arrow.gif) no-repeat 0px 6px;  text-align: left;  margin: 2px 0px -1px;  color: #4A4A4A;  font-size: 90%;  line-height: 130%; }

#page #column1 ul li a, #page #column2 ul li a, #page #column3 ul li a { color: #BED8F6;  text-decoration: none; font-weight: normal;  line-height: 20px;  font-size: 94%; }

#page #column1 ul li ul li ul a, #page #column2 ul li ul li ul a, #page #column3 ul li ul li ul a { color: #FFFFFF; text-decoration: none;  font-size: 94%;  line-height: 12px;  font-weight: normal; }

#page #column1 ul a:hover, #page #column2 ul a:hover, #page #column3 ul a:hover { text-decoration: underline; }

#page #column2 { width: 39%; float: left; margin: 0px 1px; }

#page #column2 p { margin: 13px 0px 0px 11px; text-align: left; margin: 14px 0px 0px 3px; }

#page #column2 h4 { color: #F6B601; font-size: 14pt; margin: 0px 0px -4px 11px; text-align: left; line-height: 30px; line-height: 29px; font-weight: normal; }

#page #column2 span { color: #F6B601; }

#page #column3 { width: 37%; float: right; clear: none; text-align: left; background-color: #fff; margin-right: 5px; }

#page #column3 h5 { color: #000; font-size: 14pt; margin: 0px 0px -4px 11px; text-align: left; font-weight: normal; margin: 0px 0px -4px 3px; }

#page #column3 p { margin: 2px 5px 8px 11px;  text-align: left; font-size: 12pt; line-height: 1.3em; margin: 3px 0px 7px 3px;  color: #000; }

#page #column1 span { color: #F9921C; }

#page #column2 span { color: #A7B520; }

#page #column3 span { color: #4C84B5; }

#page #column3 .ads { padding: 10px;  margin: 10px auto; }

/*SINGLE WIDTH STYLES*/

#page #one_column { width: 100%; background-color: #fff; color: #4A4A4A; }

#page #one_column h2 { background-color: #fff; text-transform: uppercase; text-align: left; font-size: 16pt; font-weight: bold; color: #4A4A4A;  margin: 20px; }

#page #one_column h3 { background-color: #fff; text-transform: uppercase; text-align: left; font-size: 14pt; background: url(../images/line.gif) no-repeat bottom left; font-weight: bold; color: #000; margin: 10px 5px 6px 20px; }

#page #one_column p { width: auto; text-align: left; color: #4A4A4A; font-size: 12pt; line-height: 1.3em;  margin: 10px 20px; clear: none; }

#page #one_column ul { list-style: none; padding-left: 14px; margin: 10px; }

#page #one_column ul li { padding-left: 15px; background: url(../images/arrow.gif) no-repeat 0px 6px; text-align: left; color: #4A4A4A; font-size: 90%; line-height: 130%; margin-top: 0.5em; }

#page #one_column ul li ul { list-style: none; padding-left: 0px; }

#page #one_column ul li a { color: #000; text-decoration: none; font-weight: normal; line-height: 1.3em; font-size: 94%; }

#page #one_column ul li ul li ul a { color: #FFFFFF; text-decoration: none; font-size: 12pt; line-height: 1.3em; font-weight: normal; }

#page #one_column ul a:hover { text-decoration: underline; }

/*COUNTDOWN TIMER*/

.centre p { color: #4D85B6;  margin: auto;  text-align: center; }

.countdowntitle, #countdowntitle { font-family: Verdana, Helvetica, Arial, sans-serif;  text-transform: uppercase;  font-size: 90%;  font-weight: bold;  color: #4D85B6;  margin: 10px; }

span#countdown1 { color: #4D85B6;  margin-left: 35px;  text-align: center;  font-size: 150%;  height: 120%;  font-weight: normal;  text-align: center;  letter-spacing: 1px;  line-height: 3em; }

#page #column3 p.units { font-size: 10pt;  color: #000;  text-align: center;  margin: 0 auto;  padding: 0;  line-height: 1.1em; }

/*** END COUNTDOWN TIMER STYLES **

** FAQs STYLING ***/

dl.border-around { margin: 2em 0;  padding: 0;  width: 50%; }

.border-around dt { background-color: #A8B621;  color: #fff;  padding: 1em 0.5em 1.2em;  font-weight: bold;  text-align: center;  line-height: 2.9em;  text-transform: uppercase;  border-left: 1px solid #131210;  border-right: 1px solid #131210;  border-top: 1px solid #131210; }

.border-around dd { margin: 0 0 1em;  background: #DBD8D8;  text-align: center;  color: #000;  padding: 1em 0em;  font-style: italic;  border-left: 1px solid #131210;  border-right: 1px solid #131210;  border-bottom: 1px solid #131210; }

dl.border-around dt span.quest { margin: 1px;  float: left;  font-size: 2.5em;  color: #F9921C;  font-weight: bold; }

html body div#container div#pagecontent div#page div#two_column dl.border-around dd span.ans { clear: none;  padding: 5px;  float: right;  font-size: 2.7em;  color: #4F84B6;  font-weight: bold; }

/*** END FAQs STYLING **

***************************** TIMETABLE *****************************

Creating a CSS-Based Timeline

Timeline styles (c) 2007 Kate Bolin

http://www.katemonkey.co.uk/article/18/a-css-based-timeline

http://www.katemonkey.co.uk/example/10.html

Start Timeline*/

ol#timeline { clear: left;  list-style-type: none;  margin: 0;  padding: 0;  width: 100%;  font-size: 88%; }

ol#timeline li { border-bottom: 1px solid #006;  color: #000;  clear: both; }

ol#timeline ol { list-style: none;  margin: 0 0 0 9em;  padding: 0;  display: block;  border-left: 1px solid #006;  float: left;  position: relative;  top: -1em;  background: #EEE; }

ol#timeline ol li { border: 0;  display: block;  list-style: none;  padding: 0 0.5em;  clear: both; background-color: #fff; }

ol#timeline ol li.nested, ol#timeline ol li.nested_blue, ol#timeline ol li.nested_orange, ol#timeline ol li.nested_green { border-bottom: 1px solid #006;  list-style: none; }

ol#timeline ul { list-style: none;  margin: 0 0 0 6em;  padding: 0.5em;  display: block;  border: 1px solid #003;  background: #fff;  width: 20em;  float: left;  position: relative;  top: -1em; }

/***********************************End Timeline

FOOTER STYLING*/

.clear { clear: both; }

#footer { float: left;  font-size: 12px;  line-height: 1.4em;  color: #4A4A4A;  width: 949px;  height: 150px;  background-image: url(../images/footer.gif);  background-repeat: repeat-x;  background-position: top left;  font-weight: normal;  background-color: #333333; }

#footer_content { margin: 15px; }

#footer_content a { color: #4A4A4A;  text-decoration: underline; }

#footer_content a:visited { color: #53377F;  text-decoration: underline; }

#footer_content a:focus, #footer_content a:hover, #footer_content a:active { color: #FFF;  text-decoration: underline; }

#footer_content img.left, #footer_content img.left a { float: left;  margin: 5px 7px;  clear: none;  border: none; }

.linksmall { font-size: 64%;  color: #4A4A4A; }

.linksmall a { font-size: 64%; }

.noprint { display: none; }

Any ideas anyone?

_____________________________

~~ "A cruel god ain't no god at all" ~~
~~ Erase hate. Practice love. ~~


treetopsranch Posts: 1527 From: Cottage Grove, OR, USA Status: offline	RE: Print stylesheet and Google Chrome - 6/8/2009 20:41:54 Exactly what page are you trying to print? _____________________________ Don from TreeTops Ranch, Oregon "I've got a taste for quality and luxury" (in reply to womble)


Tailslide Posts: 6691 Joined: 5/10/2005 From: Out here on the raggedy edge Status: offline	RE: Print stylesheet and Google Chrome - 6/9/2009 5:39:49 Ooh what a pain! Maybe this is the cause: http://jeremyjarratt.com/2008/09/03/google-chrome-obeys-alternate-css/ If not all I can suggest is stuff you've probably already done such as ensuring it's not preferring a rule from the normal stylesheet over the print by starting off with the print stylesheet exactly the same as the normal one and just removing rules one by one... _____________________________ Little Blue Plane Web Design \| Land Rover project (in reply to treetopsranch)


womble Posts: 5972 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Print stylesheet and Google Chrome - 6/9/2009 16:43:20 Various pages Don - anything with two columns prints as one column under the other in Chrome, which is a real pain, as it prints fine without the print stylesheet. Thanks Tail - interesting reading. It's a problem I've not come across before. I've managed to get both columns to display now printing, but they're both squished up to the left - they're readable, but it's not ideal, and there's a large blank space on the right of the page. I've just checked it out in Safari actually (which I hadn't done before ), and it's the same problem, so I guess it maybe is a Webkit thing. I have tried commenting out various lines, with no effect so far, but I think, as you said Tail, I'm going to have to go through it line by line to try and find the problem. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to Tailslide)