jeffg Posted March 14, 2008 Share Posted March 14, 2008 I get different results on a page formatted for printing depending on whether I use a link to a style sheet or include the style directly in the page. What am I doing wrong?This is my test page with the style embedded directly: <?phpecho <<<END<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML><HEAD><TITLE>Some title</TITLE><STYLE TYPE="text/css">@media print{BODY {font-family: Verdana, Arial, helvetica, sans-serif; font-size: 10pt}H1 {text-align: center; font-size: 18pt}H2 {text-align: left; font-size: 14pt}H3 {text-align: left; font-size: 12pt}}</STYLE></HEAD><BODY><H1>This is the heading</H1>Here is some body text.journey_id is $journey_id.END;echo "<script TYPE=\"text/javascript\">window.print();document.location.href=\"journey.php?".SID."\";</SCRIPT>";?><!-- End of page body --></BODY></HTML> This works as expected - I get a nice sans-serif font with the H1 centred on the page. (Mind you, before I put in the @media print, it didn't work either.)This is my test page linking to an external style sheet: <?phpecho <<<END<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><HTML><HEAD><TITLE>Some title</TITLE><LINK REL="STYLESHEET" HREF="vcwb.css" TYPE="text/css"></HEAD><BODY><H1>This is the heading</H1>Here is some body text.journey_id is $journey_id.END;echo "<script TYPE=\"text/javascript\">window.print();document.location.href=\"journey.php?".SID."\";</SCRIPT>";?><!-- End of page body --></BODY></HTML> and this is the style sheet: <!--@media screen{BODY {font-family: Verdana, Arial, helvetica, sans-serif; }DIV {margin-left: 20%; margin-right: 22%; padding: 10px; border-style: solid; border-color: teal; background-color: honeydew} H1 {text-align: center; color: blue; font-size: 24pt}H2 {text-align: center; color: blue; font-size: 18pt}H3 {text-align: center; color: darkgreen; font-size: 14pt}LEGEND {font-style: italic}}@media print{BODY {font-family: Verdana, Arial, helvetica, sans-serif; font-size: 10pt}H1 {text-align: center; font-size: 18pt}H2 {text-align: left; font-size: 14pt}H3 {text-align: left; font-size: 12pt}}--> This doesn't work: the H1 is left-aligned and the page uses a (presumably default) serif font.So what's different?? Edit: Eek! I just checked with Internet Explorer to see if that works and I don't even get the print dialog using window.print() - but that's for a different forum.Edit #2: If I remove the return to journey.php, I get the print dialog for IE, and it gets the style correctly from the linked style sheet, but Firefox stays the same.So it seems the linked style works for IE but not for FF. (I just have to sort out why IE doesn't print at all with the original code.) Link to comment Share on other sites More sharing options...
bairdb Posted March 14, 2008 Share Posted March 14, 2008 I would break out your print styles and pages styles into two .css files. Then when you are linking the files just add this. <link type="text/css" rel="stylesheet" href="vcwb.css"><link type="text/css" rel="stylesheet" href="print.css" media="print"> Link to comment Share on other sites More sharing options...
jeffg Posted March 14, 2008 Author Share Posted March 14, 2008 Thanks for the tip. I have in fact gone back to my in-line style, since only one page is affected. What I think you are really saying is that there is a bug in Firefox whereby it can't handle both media types in the same file? The W3Schools examples show both in a single file, anyway Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.