Absolutely Centered Layout and Print Stylesheet in Safari

[VIPStephan]

Well, it’s not really a question that I have but an interesting observation I made and that I wanna share with you. I don’t have a blog to post that and receive comments so I’m doing it here. :)

Now here’s the case: Recently I got into writing print stylesheets and found that this seems to be an often neglected market segment. Anyway, I started to write the screen stylesheet as usual, then added a simple print stylesheet that hides all unnecessary stuff and just displays the relevant text. Looked all good except Safari gave me a headache because for some reason a big section of the top was just not displayed in the print preview (i.e. the text would be printed from the top of page one but it wouldn’t start with the header but rather somewhere in the middle of the text).

After a while I found that the dedicated screen stylesheet seems to have an influence on the print layout but only in Safari… strange.

I tracked it down to this rule (screen stylesheet):

#container {
width: 793px;
height: 629px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -315px;
margin-left: -396px;
border-top: 1px solid #173D81;
border-bottom: 1px solid #173D81;
}


As you can see I have a page that is absolutely centered. I’ve always been using this method so far and ha no problems with it - that was before I cared about print stylesheets.

Now what happens is that the top margin is somehow inherited to the print layout but only in Safari, resulting in parts of the content being moved upwards out of the page. And even trying to overwrite this rule and setting margin-top: 0; in the print stylesheet wouldn’t help. However, if I’m countermanding it through the positive value of 315px it’s displayed correctly - only in Safari print preview again, though. The others are now displaing a huge gap between the top of the page and the top of the text.

I racked my brain trying to find some kind of legal “hack” (as I care for validity) but nothing helped. However, finally I found a solution that is as simple as it can be, haha. :) A solution that makes one knock his head against the desk because it’s so simple. I just replaced the top property with bottom and the margin-top with margin-bottom, respectively, and TADAAA! It’s displayed correctly on paper/in print preview while still centering on the page (since it doesn’t matter which edge you use as reference to position it). :D


#container {
width: 793px;
height: 629px;
position: absolute;
bottom: 50%;
left: 50%;
margin-bottom: -315px;
margin-left: -396px;
border-top: 1px solid #173D81;
border-bottom: 1px solid #173D81;
}


Maybe someone before me found this already but I haven’t found anything on the internet so I thought I’d share my discovery to build up my ego by fishing for compliments and appreciative comments, haha. :p

Thanks for your attention.

[Arbitrator]

It’s kind of hard to say “wow” (or whatever) without actually seeing the relevant code and seeing how it works for ourselves. It’s possible that you misspecified something or that Safari doesn’t support what you’re doing. If using the beta version of Safari 3.0, it’s also possible that that’s an uncaught bug; you might try using the Report Bugs to Apple command.

I can’t remember why, but I seem to recall that it’s better to use that page‐centering technique from the right and bottom rather than the left and top. I’m thinking that it was related to the window size.

[VIPStephan]

Yeah I know, some code would be cool but I don’t wanna put a link right now as it’s a work in progress and not official yet. But I’m about to go live now and will post the URL later.

I’m pretty sure I didn’t misspecify anything as the print stylesheet is really basic and nothing advanced (yet). And I tested it numerous times. And I’m using Safari 2.0.4, no beta.
Anyway, have a little patience. I’ll show the example by the end of the day.

[VIPStephan]

OK, sorry, wanted to post earlier but there were a lot of things to do and the guys still wanted some changes. Here’s the site (http://mahanaim.com) now. It’s not entirely finished yet but that’s not the issue here.

Unfortunately using the bottom (and right?) as references to position the container makes the website somewhat “shaky” in Firefox (i.e. on window resize the site wouldn’t move exactly with the background image but with one pixel difference). Unfortunately the design is very rigid. (That’s a typical example of a graphic designer’s vision and the real life issues of websites - the layout is fixed in width and height, centered at the screen, and the background even makes it impossible to have the pages resize on text resize. A real challenge to code!)

Anyway, due to the unwanted behavior in Firefox if using the bottom property I had to apply a Safari hack to do what I want. As said earlier, the negative top margin in the screen stylesheet makes the text in the print layout in Safari move upwards, too. Using bottom does work but not with this layout with its rigid structure.

[Arbitrator]

Unfortunately using the bottom (and right?) as references to position the container makes the website somewhat “shaky” in Firefox (i.e. on window resize the site wouldn’t move exactly with the background image but with one pixel difference). Unfortunately the design is very rigid. (That’s a typical example of a graphic designer’s vision and the real life issues of websites - the layout is fixed in width and height, centered at the screen, and the background even makes it impossible to have the pages resize on text resize. A real challenge to code!)I get misalignments in Firefox 3 Alpha 5, Internet Explorer 7, Opera 9.2, and Safari 3 Beta. Sometimes the layout is properly aligned and sometimes it’s not; it depends upon the viewport dimensions. Looks like a rounding issue. Firefox 2 seems to maintain the exact position regardless though.

Anyway, due to the unwanted behavior in Firefox if using the bottom property I had to apply a Safari hack to do what I want.#container {
top: 50%;
left: 50%;
margin-top: -315px;
margin-left: -396px;
}The above code works fine for me in Safari 3. (Yes, I remember that you are using version 2.) I don’t know what the “hack” used is; maybe it’s that stray number sign (#) character in the imported style sheet?

As said earlier, the negative top margin in the screen stylesheet makes the text in the print layout in Safari move upwards, too. Using bottom does work but not with this layout with its rigid structure.Print Preview works fine in Safari 3.

<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />The correct media type is image/vend.microsoft.icon. Last time I checked, Internet Explorer supported it.

[_Aerospace_Eng_]

There is also this method: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html