css media print problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

css media print problem

Post by sarris »

Hi there...
I am using this style for my page

Code: Select all

<style type="text/css">
body	{margin: 2% 5%; background-color: Ivory}
h2,h3,pre	{color: DarkOrchid}
div.breakafter {page-break-after:always;
	color: silver}
div.breakbefore {page-break-before:always;
	color: silver}
</style>

<style type="text/css" media="print">
div.page  { 
writing-mode: tb-rl;
height: 80%;
margin: 10% 0%;
}

div.page table {
margin-right: 80pt;
filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
and i have this table

Code: Select all

<div class="page">
<h3>Third Page Should Be in Landscape</h3>
Hallo there
<!-- Use IE Conditional Comments to hide table from IE5.x -->
<!--[if gte IE 6]>

<table bgcolor = "Yellow">
<tr>
    <td>First Cell in first row</td>
    <td>Second Cell</td>
    <td>Third Cell in first row</td>
</tr>
<tr>
    <td>First Cell in row 2</td>
    <td>Second Cell</td>
    <td>Third Cell in row 2</td>
</tr>
</table>

<![endif]-->

</div>
For some reason the table on the print preview doesnt have background yellow, and off course the printing comes without yellow. However the rotation works...The table and the text prints on landscape...
[/syntax]

Any ideas why this is happening?
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

It's up to the browser to print the background of pages... you have no control over that.
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post by sarris »

there must be a way...no?
User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post by Kieran Huggins »

no - the browser has an option for this - it's out of your control as a designer.

You could ask people to download a PDF, but that's unlikely.
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

alternatively, u could go the messy way around and add in 100% width and height yellow image with a lower z-index than all above content.
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post by RobertGonzalez »

That seems so dirty. But effective if you absolutely need yellow.
sarris
Forum Contributor
Posts: 137
Joined: Mon Dec 04, 2006 2:44 pm

Post by sarris »

ok..will try the messy way
have another question though

Conserning the table, my code is that

Code: Select all

<div class="page">
<p>&nbsp;</p>
  <table bgcolor = "Yellow">
<tr>
    <td>First Cell in first row</td>
    <td>Second Cell</td>
    <td>Third Cell in first row</td>
</tr>
<tr>
    <td>First Cell in row 2</td>
    <td>Second Cell</td>
    <td>Third Cell in row 2</td>
</tr>
</table>

</div>
However if i dont have the <p>&nbsp;</p> the table doesnt show at all at the print preview...Why is that happening?
Post Reply