Controlling margins in Page Setup in Firefox

[Eiolon]

I have some CSS code that I can control the Page Setup margins of Internet Explorer and Google Chrome but it will not work in Firefox.

 

Basically I want the margins to be set to 0 instead of what is specified on the browser.  Any idea of what I can add to have it work in Firefox?

 

<style type="text/css"> 
@page  
{ 
size: auto;   /* auto is the initial value */ 
margin: 0mm;  /* this affects the margin in the printer settings */
} 

body  
{ 
background-color:#FFFFFF;  
margin: 0px;  
} 
p {
margin:0;
padding:0;
font-family: "Courier New", Courier, monospace;
font-size:12px;
}
</style>

[floridaflatlander]

I would think that would work, do you/did you use Firefox's fire bug to see if there is something interfering with your styles?

[Eiolon]

Never heard of Firebug.  I just installed it but not exactly sure what I am looking for.  I click the CSS panel and it shows the CSS but not sure if there is an indicator I should be looking for if there is a problem?

[floridaflatlander]

Open firebug click the html the tab(you'll have html, css, script tabs etc.) then the div tags until you get to the tags in question.

Firebug well tell you where the style is coming from, what the css file name is, what line the style is coming from, the inheritance if any and the name of the style. It also color codes the style on the web page so you can see the styles.

 

Also plug your css in here http://jigsaw.w3.org/css-validator/ and your html in here http://validator.w3.org/ and see what they say (you should always do this). Sometimes and extra semicolon, bracket or missing closing html tag can throw things off in one browser but not another.

[Eiolon]

The page is validating fine for both HTML and CSS.  This is literally just a page with text on it because it is being sent to a point of sale receipt printer.  The only CSS is the code I provided in the original post and that all validated fine.

 

Here is how it looks in the browser:

 

 

Here is the result when the receipt is printed.

 

 

So if there is any way to make that margin disappear without having to manually edit the Page Setup in the browser that is what I am looking for.

[Mahngiel]

you have something going on in your site that either chrome is correcting for you, or not correcting for you. if you share a link (on here or in PM) i can take a gander for you.

[Jessica]

try:

html,body{

margin: 0;

padding: 0;

}

[Eiolon]

try:

html,body{

margin: 0;

padding: 0;

}

 

Same result, sadly.

 

I have uploaded the page to http://intravising.com/phpfreaks/receipt.php

 

The only thing I did was remove the PHP in the file.  The HTML and CSS are untouched.

[Jessica]

It looks fine in Firefox for me.

14.0.1

 

Are you saying the problem is only when you print?

I don't see the html rule I suggested in your example file.

Have you tried doing it without the @page method, and just using body/html?

[Mahngiel]

http://i.imm.io/yZL4.png

 

Works just fine here.  I think you just need to update your FF.

[Eiolon]

I too am using 14.0.1.

 

I only care about the print margin when it is applied to paper.  As shown with my above receipts, the margin is only there when printed from Firefox.  It is non-existant if I print from IE or Chrome.

 

jesirose - if I remove the @page code, it makes it so the margin is no longer 0 for the printer.  I then get the same result as the Firefox receipt.  I have removed the @page and tried doing only the html,body tag you suggested and did not fix Firefox but broke IE and Chrome.

 

Mahngiel - you still have the margin visible in your print preview screen.  If I look at the print preview in IE and Chrome, the margin is not there, just with Firefox.

 

Keep in mind I have the headers/footers set to empty for all the browsers so I am not sure if that is why you have one.

 

EDIT: I think at this point I will have to control the margins from the browser.  I was hoping to avoid doing so that way non-receipts would not be affected.  They will just have to live with everything they print to the laserjet being brushed up against the page.

[Mahngiel]

you can't override someone's  printer's natural page margins.  if my printer is set up to 1" margins, then you only get 6 1/2 of the 8 1/2 inches to work with. That's what you're seeing in my print preview

[Eiolon]

That is correct.  However, using the @page CSS code I was able to have the printer inerpret the margin for where it printed on the paper.

 

For example, in Internet Explorer I set the print margin to be 5 inches all around.  However, inserting the @page CSS made it so it printed to the very edge instead of 5 inches into the paper.  So while it doesn't change the value found in Page Setup of the browser, it does sent it to the printer without the margin.

[Mahngiel]

According to Mozilla Developer Network there is no support for these rules in FF.  Weird, normally this is an issue with IE...

 

Here are further notes