@page :first { margin: ... } in Chrome bug?
You stated:
Mozilla's documentation seems to me to claim that Chrome supports this
properly.
True, but the :first
CSS pseudo-class shows unknown support from Chrome ("Unknown support. Please update this."
Also, there are many print preview issues with Chrome and I stumbled across some that sounded similar to this problem such as this one. Nevertheless, I could find no work arounds. Just so you are aware in your own testing I tried:
- negative margins
- padding rather than margins
- large borders to simulate margins
- forced page breaks (possible hack solution)
- explicit
width
andheight
!important
I performed a lot of testing and Chrome appears to ignore or improperly implement the CSS rules when generating the preview PDF file. Personally, from my testing results, I think this is a bug.
Update
- Firefox v17.0.1 - Does not apply
@page
rules at all. - Chrome 23.0.1271.97 m - incorrectly applies the
:first
pseudo class on all pages. - IE 9.0.8112.16421 - performs the same misapplication of rules as Chrome
My findings coincide with the browser compatibility chart on the :first
pseudo class page. That is, an unknown compatibility for Chrome and a "not supported" compatibility for Firefox. I was unable to test IE8, but my test with IE9 does not support the chart's claim. Even Microsoft's examples fail to render correctly (CSS How-to: Optimize Pages for Printing Using CSS).
After more testing, I can only conclude that @page
hasn't been completely integrated into most browsers. The specifications are present (there are new specs. for CSS3) but based on our tests, the lack of tested examples in articles, and the bug reports it looks like you won't be able to successfully use the more flexible specs of the @page
styling.
Chrome bug: margin-bottom to the browser edge?
add a padding-bottom to the element containing your div, even if it's the body element.
This works in all browsers, so you will have to remove the bottom margin from the div.
Why Chrome doesn't respect the margin properly?
RESOLVING
After a long search I reported the issue on chromium repo. And they accept it as a bug. So, if anyone wants to know the final of this history can follow the fix process here.
Thanks anyone who try to help us, but let me add that I did not believe that Stackoverflow can be able to not see an error of this magnitude. I am a little less stackoverflowita.
@page margin settings only work in Google Chrome
dont use the px
The page context has no notion of fonts, so 'em' and 'ex' units are not allowed. Percentage values on the margin properties are relative to the dimensions of the page box; for left and right margins, they refer to the width of the page box while for top and bottom margins, they refer to the height of the page box. All other units associated with the respective CSS 2.1 properties are allowed.
Specs
problem with browsers Firefox and Chrome when printing a page?
Yes I solved it! After struggling for about two hours I discover two nice tricks one for fixing problems at Chrome: or just specify height at <tbody class="minHeight" style="height: 720px">
table {
display: table;
table-layout: fixed;
}
td {
display: table-cell;
}
And about Firefox I found out that it's a bug I solve it by giving table
attribute cellspacing="0"
and in CSS
style border-collapse:initial;
Related Topics
CSS - Position: Absolute; - Auto Height
CSS Transitions with :Before and :After Pseudo Elements
Calc() Function Inside Another Calc() in CSS
Bootstrap 4 Responsive Button Size
How to Change Svg Fill Color When Used as Base-64 Background Image Data
CSS Perfect Full Screen Image Background
Firefox Line-Height Issue with Input Fields
How to Add CSS Files to a Custom Module in Odoo
CSS Transform to Skew the Shape to a Trapezium
Maintain CSS Styling When Converting HTML to PDF in ASP.NET
Facebook Like Widget on Fan Page, Comment Area Out of Visible Area
How to Make a Fluid Sticky Footer
Customize a Select with Font-Awesome
Combine Calc() with Attr() in CSS
Rgba Background with Ie Filter Alternative: IE9 Renders Both!
Clicking a Child Doesn't Trigger the Parent's :Active State in Ie