/    Sign up×
Community /Pin to ProfileBookmark

Print margin ignored!

Copy linkTweet thisAlerts:
Dec 20.2005

I use the following css to set the document’s margins for when it is printed.

[code]
@media print {
body {
margin-right:5cm;
margin-top:5cm;
margin-bottom:5cm;
margin-left:5cm;
}
}
[/code]

It works fine if the body content does not have any element with fixed width. Like this:

[code]
<div> … some big text …</div>
[/code]

But if an element has any width set, all margins work EXCEPT the right one!

[code]
<div style=”width: 400px;”> … some big text …</div>
[/code]

I don’t see any reason for a fixed width to affect the print margins, because if you use the browser to change the margins it will respect your changes, but the same doesn’t happen here with the css… why?? Is there any work around?

This happens in both FF and IE.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@KDLADec 20.2005 — The print margin defaults have to be manipulated by the end-user, rather than the CSS, in cases of fixed width. CSS will not override them.

Best thing is to use liquid layout, rather than fixed.

Some good resources:

http://www.alistapart.com/articles/goingtoprint

http://www.alistapart.com/articles/alaprintstyles

KDLA
Copy linkTweet thisAlerts:
@LAZARUSauthorDec 20.2005 — In my case it is not a web page, but a web application. The margins are standard for each type of document so the user can't touch them, so it must be set with css.

The main question is why only the right margin gets ignored with fixed width layout. All the other 3 margins are normally respected. Is this a bug? I just wanted to know if there is any logic into "ignoring only the right margin". This is crazy ?
Copy linkTweet thisAlerts:
@KDLADec 20.2005 — I've had that happen with SQL databases before. I agree that it's totally frustrating.

Have you tried percentages or em for the margins, rather than cm?

KDLA
Copy linkTweet thisAlerts:
@LAZARUSauthorDec 20.2005 — I just tried using em and % but still no luck. Same thing happens...
Copy linkTweet thisAlerts:
@PanrovianMonkDec 22.2005 — Think about how the printer is going to layout this page. Starting at the upper left corner of the page:
[list=1]
  • [*]It will come down 5cm (margin-top)

  • [*]It will move right 5cm (margin-left)

  • [*]It will place a 400px wide item on the page

    • [/list]
    It is only going to check the margin-right to determine if there is room for the next item w/o a break.

    If you remove the inline style and class your div, then you can override the class in the print style to change the width to "auto" causing the page to wrap at the 5cm right margin. Unless the div contains a large image or a very long string of un-spaced characters.

    Good luck,

    PM
    Copy linkTweet thisAlerts:
    @felgallDec 22.2005 — Widths take priority over right margins. If something is wider than the space between the left and right margin and you don't have overflow:hidden then the right margin will be ignored.
    ×

    Success!

    Help @LAZARUS spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 6.1,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,
    )...