Page 1 of 1

css media print problem

Posted: Thu Mar 08, 2007 2:39 pm
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?

Posted: Thu Mar 08, 2007 2:44 pm
by nickvd
It's up to the browser to print the background of pages... you have no control over that.

Posted: Thu Mar 08, 2007 2:59 pm
by sarris
there must be a way...no?

Posted: Thu Mar 08, 2007 3:08 pm
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.

Posted: Thu Mar 08, 2007 6:42 pm
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.

Posted: Thu Mar 08, 2007 6:47 pm
by RobertGonzalez
That seems so dirty. But effective if you absolutely need yellow.

Posted: Fri Mar 09, 2007 8:56 am
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?