Log in / Register

Forum › How do I...?

Default CSS for headers and footers?

jimbrooking
I've just spent a couple of hours getting a report generated. I really think there must be an easier solution than the one I finally found, with is sort of a blunt instrument. My @top content:
@top { 
        content: "SCC Roster Checkoff"; 
        font-size: 200%;
        margin:1em auto 1em auto;
        display:block;
    }

was overlapping the @page's margin specification of
margin: 1.5in 0.5in .5in 0.75in;

I couldn't see any way to get them to not overlap, but finally added
margin-top: 1in;

to the second (in order of appearance in the file) @page specification. The XHTML file is here: http://www.fearringtonfha.org/newprint/tmp_WorkFile.xhtml

Question #1: Is there any any documentation of the default definitions for the paged media entities (e.g., @page, @top) in the Paged Media section of the documentation?

Question #2: Why did the page content overlap the @top material and what would have been a better way to ensure that they didn't overlap?

Thanks.
jarmar
Hi, I believe your problem is that printing.css, which defines a top margin of 0.5in, is taking precedence over your first declaration. All three @page declarations (in <head>, in printing.css and in <body>) have the same specificity, so the rule applied is the one which appears last. This is why adding the rule in the <body> style tag helps. The @top margins are not related.

I found this section in the spec very helpful for understanding margin boxes. Basically the @page margin declaration is a bit different from your usual margin declarations, as it defines the area available for margin boxes.

I'm unsure about what defaults Prince uses, though.
jimbrooking
Thanks for the tips, Jarmar. The reference to the W3 discussion is also helpful. I tried to make up a test page that but different borders, colors and text in the margin areas (http://www.fearringtonfha.org/princeTest.xhtml) but it didn't show anything outside the margins.
mikeday
There is a syntax error ("$top-right-corner") which is causing the entire @page rule to be dropped.
jimbrooking
AAARRRRGGGGHHHH! :oops:
jimbrooking
Of course it works much better without syntax errors, doesn't it. The bad one is replaced with a corrected one.

I can see (fairly) clearly that the corners are as stated in the W3 article, and the top margin seems to be divided into three equal parts. I assume the bottom works the same way, and probably the left and right margin areas also divide the area in three. Not clear how the sizes of these pre-defined areas could be changed if one desired to do that.

There's some Prince font specification defaults (Arial, maybe) that isn't revealed. But I can see now (I think) that I could put padding, margins, etc. into these areas so content comes out as expected.

Thanks to Mike and Jarmar for the help.