@page Css style not working for Mozilla firefox

Question

My requriment is to provide 10cm margin to all the page when printing.

I'm printing using window.print(). My web page will dynamically increase (so number of pages cannot be determined). For all the pages I need to provide margin of 10 cm.

I used CSS Media="Print", within which I defined the style:

 @page
 {
 Margin-top :10cm; 
 }

This is working in all the browsers except Mozilla firefox. I searched for solutions and all the blogs say, Mozilla will not support @page, but No Solution. Can someone help me on this? Please let me know is it posible to implement in mozilla

• saTech: page will support in all the browser .. but not in mozilla .. I need to implemtn @page for mozilla some how
• saTech: please can someone let me know Can we implement this really?
• Cypress Frankenfeld: I don't think there is support for styling page margin's in Firefox. I've done a fair amount of googling, and everything I've read says they do not support it. I would be very interested if anyone manages to find an answer to this.

Answer 1

Sorry, I know your question is quite old, but it showed up on a google query I had for the same problem.

According to this link (https://developer.mozilla.org/en-US/docs/Web/CSS/@page) it's supported in Firefox since 19.0, which was after your post, just for completeness...

Answer 2

Try to use @document with moz prefix like @-moz-document for Firefox

The @-moz-document rule is a Gecko-specific at-rule that restricts the style rules contained within it based on the URL of the document. It is designed primarily for user style sheets. A @-moz-document rule can specify one or more matching functions. If any of the functions apply to a URL, the rule will take effect on that URL.

EXAMPLE:

@-moz-document url(http://www.w3.org/), 
 url-prefix(http://www.w3.org/Style/), 
 domain(mozilla.org), 
 regexp("https:.*") 
{ 
 /* CSS rules here apply to: 
 + The page "http://www.w3.org/". 
 + Any page whose URL begins with "http://www.w3.org/Style/" 
 + Any page whose URL's host is "mozilla.org" or ends with ".mozilla.org" 
 + Any page whose URL starts with "https:" */ 
 /* make the above-mentioned pages really ugly */ 
 @media print{
 body { margin-top :10cm; }
 } 
} 

Available Function:

• url(), which matches an exact URL
• url-prefix(), which matches if the document URL starts with the value provided
• domain(), which matches if the document URL is on the domain provided (or a subdomain of it)
• regexp(), which matches if the document URL is matched by the regular expression provided. The expression must match the entire URL.

• saTech: Thank for reply AK.. Can you pls explain why we are using url(w3.org), url-prefix(w3.org/Style) should i replce this with something else?
• saTech: Can some one help me on this?
• Cypress Frankenfeld: This at-rule can be used to apply CSS to only Firefox, but I think this does not directly solve the problem at hand to simply add a 10cm margin to the body element. Firefox will respect that margin, but it will also add an additional margin on top of the body, in between it and the edge of the page. Mozilla does not currently support a method of setting the page margins using CSS.
• saTech: @cypress for firstpage i can add margin easily in firefox also. but as my web page can have dymanic data .. number of page for print exeeds to 2 or 3 pages.. for all 3 pages i need to give same margin