Why properties inside @media print (for div) not working? - Css

See more:

VB

ASP.NET

CSS

CSS3

I have set the crystal report in my website all the pages to be shown continuously, and when printing it i want to break the pages according to the division. I don't know what is wrong with my code, it isn't working in any browser. Here is the code inside the css, for @media print.

{

body{display: block;}

.css-element {
overflow: visible !important;
position: relative;}
	
.my-floated-elements {
float: none !important;}

div#CrystalReportViewer1_ctl01 > div
{
    page-break-inside:avoid; 
	page-break-after:always;	
}

table{background-color: lightblue;}
 	
/*.header img {float:none;}*/
	.header .logo { float:none;}
	.header .rightcol img {float:none;}
	
	h4{margin:0;}
	bold{margin:0;}

	.save-and-print {display:none}
	.save-print-image {display:none}
	.save-button {display:none}
	.print-button {display:none}

}

Here is the is wht I've included as link in the .aspx:

<link rel="stylesheet" href="../css/style.css" type="text/css" media="print"/>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen"/>

To know the division, I checked the inspect element (google chrome) and took the id of the division (CrystalReportViewer1_ctl01)

What I have tried:

I have tested the @media print by setting the background color of the report, and it worked. Please help me, thank you.