CSS: Disable Header & Footer From Print Preview Chrome
===

one of my application is web based POS(Point Of Sale). so while printing invoices in chrome.
the page header and the page footer automatically inserted by the browser that I want to supress via the page and without user intervention..

I applied some **CSS** over-here in print-media,

    @media print {
     #header, #footer { 
		visibility: hidden !important;
		display: none !important;
     }
    }

But its not applying, because might be selector not proper.

And also i tried by reducing the margin as well, but its cutting/ overriding the page-content, if print has multiple pages..
And more thing, i don't want to disable the print preview option for chrome..

Any one has good solution for this?

Best Regards..