|
CSS - Can Css Control The Browser Print Page Setup Margins?
Hello,
I'm new to CSS. I've been developing a website in PHP. I have a report that is meant to be printed. It is formated for printing. However, if the user doesn't have his/her browser print page margins set to a max of 0.25in then some of the printed area will get clipped off. Can CSS be used to control these margins on the page? I've been looking into this and have been lead to the media = "print" area. However, it only seems to be controling the webpage's body margins and not the browser's print page setup margins. I've gotten to the point of using the following style code on my page, but now I'm at a loss as to what to try next. Code:
<style type="text/css">
<!--
.style1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14pt;
}
body {
margin-left: 15px;
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
}
.style4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
}
.style15 {font-size: 10pt}
.style21 {font-size: 18pt}
.style24 {font-size: 24pt}
.style25 {font-size: 16pt}
.style28 {font-size: 12pt}
-->
</style>
<link href="file:///C|/Webs/ures/k058_styles.css" rel="stylesheet" type="text/css">
<style type="text/css" media="print">
<!--
.style19 {font-size: 14pt}
.style29 {font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
.style22 {font-size: 9pt}
.style23 {font-size: 12pt; font-family: "Times New Roman", Times, serif;}
.styleprint {
margin: 0in 0in 0in 0in;
margin-top: 0in;
margin-left: 0in;
}
-->
</style>
I added the ".styleprint" style to the page only to try and control the browser's print page setup margins. What you see above are actually two attempts to do this. Like I said above the margin settings seem to only be contoling the margins on the displayed page and not the browser's print page setup margins. How can I control the browser's print page setup margins? CAN I control the browser's print page setup margins? If I cannot, what do you do to make sure that the user can print a "printer formated" page with the correct margins? Thanks, Paul Similar TutorialsWe're having a weird problem with a print stylesheet - a little bit of the javascript menu appear on the printed over the top of the content. eg: (http://www.lawhandbook.sa.gov.au/ch10.php ) - Print Preview this page and you will see "Chapters A-Z" in the middle. This seems to happen in all browsers. We've looked into many css solutions to the issue - but to no avail - we cant make the damn thing disappear. One long winded solution is to change the stylesheet to be built dynamically - so a call to ch10.php=true would build the page differently. But this seems to defeat the purpose of using a print stylesheet in the first place. Another long winded soltuion is to change the (Rather old) menu script - but that not really an option in this case either. So my question is - What happens when a browser prints a page? Does it send anything back to the server indicating it is loading the print stylesheet instead? (eg: Some sort of request variable) Or does the client's browser simple request the CSS file and reformat the page it has already downloaded? If so I could detect this event with PHP or Javascript to not load the offending menus when the print css had been loaded Per the recommendations I received on a previous post in this forum, I have been attempting to modify my PHP templates and style definitions to follow standard semantic definitions for certain page elements. For example, I was using two proprietary classes (.headline, .subhead) to define the styles of the headlines and subheads for the full-story descriptive templates. Per the recommendation of others, I realized I should convert these to standard <Hx> definitions. When I did this, however, some inherited margin seemed to pop up in virtually all of my browsers - a huge one. I realized there might be a standard for north-south margins or line-heights associated with the default definition of the <Hx> semantics, so I added a few lines to the stylesheet to define it as such: Code:
h1 {
margin: 0;
padding: 0;
color: #000000;
font-size: 24pt;
font-weight: bold;
line-height: 30pt;
}
Interestingly enough, adding the margin and padding definitions worked fine in IE/Win, but in ALL other tested browsers (Safari, Firefox, Opera7+, NN7, Camino, Omni) the north-south margins remained MUCH larger than they had when I had used the proprietary .headline and .subhead classes. I decided to research this, and found that CSS standard allows for negative margins on blockquotes, so I went ahead an put a {margin-bottom: -18px;} on H1 and -16px on H2. This fixed the problem... but in IE/Win (naturally) now the margins receed into the text. Clearly I would rather use the proper semantic definition of those headlines/subheads, but I can't do it if I can't control the north/south margins. I'm sure someone has fixed this problem. Any suggestions? Thanks. -- Aiden I have created a css file to make the a printable page. This works fine. I was wondering if there is a way (using css) to make the page automatically load up in landscape format rather than portrait? Thanks in advance wabirdman Hi, I've been stuck for days now just trying to setup how I want to layout my page. What I am trying to get is the BODY of the page to pretty much just contain everything. The I want to put a frame around all the content so that a small rectangle gradient image that I made will expand as needed to fill the browser window. Then finally I want a DIV wrapper that will hold all the page content. Here is my latest attempt to do this; Code: html, body {
margin: 0;
color: black;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
padding: 0;
text-align: center;
}
div#frameBG {
top:0;
left:0;
z-index: 1;
}
div#wrapper {
margin: 0 auto;
width: 900px;
text-align: left;
z-index: 2;
}
div#logo {
position: relative;
top: -760px;
border: 0;
padding: 0;
}
div#leftCol {
width: 150px;
position: relative;
top: -580px;
left: 0px;
border: 2px;
padding: 10px;
background-color: #CCCC00;
text-align: center;
}
Code: <HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="style-test.css">
</HEAD>
<BODY>
<DIV id="frameBG"><img src="images/dk-green-rect.jpg" width="100%" height="100%"></DIV>
<DIV id="wrapper">
<DIV id="logo"><img src="images/header_01.jpg"></DIV>
<DIV id="leftCol">
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
<DIV> ...bunch of stuff here </DIV>
</DIV>
</DIV>
</BODY>
</HTML>
Using that I can at least get the content in the wrapper to appear over the background, but.... I get extra white space below and to the left of the background as I add more content. ...and, having to use -580px to position my stuff where I want it doesn't make sense for this. Someone suggested just putting the background in the BODY and leave out the BGframe but then the graphic repeats instead of stretching. Any help here???? This is a very interesting bug and I have been trying to do a little bit of hacking but with no success here. So, thought anyone of you would know what I'm missing.. The problem here is that it showed up just fine on the webpage but not in Print Preview or Print-Out for IE. Code:
<style type="text/css">
divBlackBox1
{
margin: 50px auto;
padding: 0px;
width: 400px;
height: 4px;
display: block; /* for IE stupidity (to make height work correctly with the correct pixels)... */
font-size: 1pt; /* for IE stupidity (to make the smaller height work due to default font-size)... */
overflow: hidden; /* Problem is that it doesn't work for print preview or print-out in IE... */
background-color: #000000;
}
</style>
<div class="divBlackBox1"></div>
Thanks, FletchSOD Is there any way to force a background color to print in all browsers or at least IE & FF? In the past I have just used an actual image; instead of a background color, but I was wondering if there was a 100% sure way to do this. I tried using media="print" and !import - neither of these worked. So if there is a will, place let me know the way. Hello I am looking for the correct way to control the alignment of elements in my HTML page. in the old days, I used to add the <center> tag whenever I wanted to center some content. if I wanted to set the alignment of content inside a table cell, I would use <td align="left"> or <td align="center"> I also noticed the CSS rule text-align. My question is, what is the correct way to use CSS to align elements so that it adhere with strict DTD rules regards Can I use CSS or javascript to control the page details of an IFRAME? Such as printing in landscape orientation? If it is possible, how? I am using PHP to generate labels and I want to print them. I am wondering if anyone could help me learn how to set the page margins? By default it looks to be printing 30px or so margins. The label sheets I am using have margins of about 5-10px. I was thinking to set margins would be something like this: Code: <style type="text/css">
<!--
body {
margin-left: 0px; margin-right: 0px;
}
</style>
but that does not seem to work, any help out there? Thanks! Hi All : Currently i'm running in .NET platform together with VB.net and ASP. I faced a problem regarding to the PAGE BREAK html tag. The problem is when i want to print out a report, it will show with scroll bar and the report is very long. So what i have to do is to apply Page-Break-After/Before into the HTML. how am i know if the report already apply the Page Break function or not? And the only style i can use is CSS. Anyone familiar with this? It's urgent !! Hope can get anyone help asap. Regards, JeFFery I am generating a list with PHP that is going to be printed out and hung up for display. I would prefer if the following weren't printed. 1) Top Left - Page Title (I know I can have this disappear by having a blank title, but I would prefer to have one) 2) Top Right - Page URL 3) Bottom Left - Page number (ex: 1 of 2) 4) Bottom Right - Date Is there any way to print the list without these? I wasn't sure if there is some css I can use, or if this is something that the printer prints automatically. Thanks Hi! Could some experienced CSS developer please confirm this: All paddings, and right and left margins, always combine (what I mean is if you have a left object with a 5px right margin and a right object with a 5px left margin, the distance between the two will be 10px). However, bottom & top margins never combine. Is all this true? I've got a real head-scratcher that I cannot find a solution for. The webpage I am talking about is he http://test.ecofreshusa.com/Company.aspx If you see the "breadcrumb-like" submenu (the grey one) in IE, zooming at 100% looks fine, but when you hit Ctrl+ or Ctrl- to text zoom, the margins between every line item (its made using an unordered list).. fall out and the text loses all spacing. Does anyone know where I went wrong? Any help would be much appreciated.. Oh and heres the CSS im using to work with this menu. Code: <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#breadcrumb {
position: relative;
left:0px;
top:0px;
width:860px;
vertical-align: middle;
height: auto !important;
background: #F0f0f0;
margin-top: 0px;
display: inline;
}
#breadcrumb_left {
position:absolute;
left:0px;
top:0px;
width:660px;
height:20px;
background-color: #f0f0f0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
#breadcrumb_right {
position:absolute;
float: right;
left:660px;
top:0px;
width:200px;
height:20px;
background-color: #F0F0F0;
border-bottom: 1px solid #cccccc;
border-top: 1px solid #f0f0f0;
z-index: 10;
}
div.crumbs { margin: 0px 0px 0px 20px; float: left; font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
}
b.crumb_title { font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;}
.crumbs span {
display: block;
}
.crumbs ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.crumbs ul li {
background: none;
display: inline !important;
margin: 0;
margin-left: 20px;
font-family: Helvetica, Arial, San-serif; font-size: 10px; color: #999999;
line-height: 20px;
}
.crumbs a:link { color: #0078C2; text-decoration: none; }
.crumbs a:visited { color: #0078C2; text-decoration: none; }
.crumbs a:hover { color: #629D34; text-decoration:underline; }
.crumbs a:active { color: #629D34; text-decoration:underline; }
.crumbs img {
float: none;
width: 8px;
height: 5px;
border: 0;
margin: 7px 0px 0px 20px;
padding: 0;
}
-->
</style>
I am having a problem where I have a <div> that holds my body image, margin: 0 auto; Inside that is my content <div> with margin:15px; but this is visually dropping the background image's margin by 15px. The problem compounds every time I add another margin/padding requirement into the rest of the <div>. Code: html, body {
margin:0px;
padding:0px;
background-image:url(images/interface/background.png);
}
#body_image {
width:935;
margin:0 auto;
padding:0px;
background-image:url(images/interface/body.png);
background-repeat:no-repeat;
background-position:center;
}
#container {
width:904px;
height:750px;
margin:15px;
}
#slug {
height:15px;
}
Code: <div id="body_image"> <div id="container"> <div id="header">Header</div> <div id="nav">Nav</div> <div id="sidebar">Sidebar</div> <div id="content">Content</div> <div id="footer">Footer</div> </div> </div> The extent of my CSS is a few tutorials online and the class I took 10 years ago where the teacher said "Here's CSS, you can't do much more than change your font size and color with it... on to tables!" Thought it'd only be fair to give you a little background. I just finished an element for a redesign of my website. I open it in Firefox, working. I open it in Safari (for Windows), fine. I open it in IE, I almost cry. My entire page is screwed up! I can't tell if it's the floats, the margins, the lists (I think it's the lists). Anyways, does anyone know whats wrong so I could fix it? http://www.politinks.com/topbar Any help would be appreciated. Thanks! hey all, my pages do not print, err they only produce a white page. i have my css set to all media - maybe there is sth. wrong with my jungle of css? i hope someone can help me out on that one. the site is: http://www.chocolateriewanders.com Hello, I have tried to make a print page using CSS to set the display to none for areas that I don't want printed. This works fine in Firefox but Exploder always pritnts a blank page first. Has anybody had similar problems? Thanks I have to design a site using a 750 pixels table. Of course, when I print the text, my text get cut off on the right hand side. Using a Print style sheet, is there any ways to avoid loosing the text on the right. Everywhere I look suggest to design into a 600 pixels table but they really want it to 750. Thanks for any help. I have a three column layout page which looks fine in IE as well as Firefox. But if I try to print the page, it prints the entire page in one column. Also, backgrounds are not printed. Searching on google, it seems CSS is the cause behind this. I could not find any solution though. Here is my CSS. Code: html {overflow-y:scroll;}
body {
font-family: Arial, Helvetica, sans-serif;
color: #354963;
font-size: 8pt;
font-weight: normal;
padding: 0;
margin: 120px 0px 0 0;
}
#wrapper {
position:absolute;
top:0;
left:0;
margin:0;
padding:0;
background:#003333 url(/corporateBanner/corporateBanner.jpg) 0 0px;
width:100%;
height:100px;
font-size:8pt;
}
#bannerWrapper {
position:absolute;
top:0;
left:0;
z-index:2;
}
#bannerTitle {
position:absolute;
top:28px;
left:80px;
color:white;
font-size:26pt;
width:600px;
margin:0;
border:0;
font-weight:normal;
z-index:2;
white-space: nowrap;
}
.hiddenLabel {
display:none;
}
#topmainMenu {
position: absolute;
right: 0;
}
#topmainMenu a:hover {
text-decoration:underline;
}
#mainTabs {
position:absolute;
top: 82px;
left: -6px;
width: 600px;
margin: 0px;
padding: 0px;
}
#mainTabs ul li {
float: left;
padding: 0;
margin: 0px;
list-style-type: none;
}
#mainTabs ul li a, #mainTabs ul li a:visited {
font-size:8pt;
font-weight:bold;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
width:105px;
text-align: center;
height:19px;
display:block;
}
#mainTab1 a:link, #mainTab1 a:visited, #mainTab2 a:link, #mainTab2 a:visited, #mainTab3 a:link, #mainTab3 a:visited, #mainTab4 a:link, #mainTab4 a:visited, #mainTab5 a:link, #mainTab5 a:visited, #mainTab6 a:link, #mainTab6 a:visited, #mainTab7 a:link, #mainTab7 a:visited {
background: transparent url(../images/tabs/primary/tabBG.gif) top left no-repeat;
color: #FFFFFF;
}
#mainTab1 a:hover, #mainTab2 a:hover, #mainTab3 a:hover, #mainTab4 a:hover,#mainTab5 a:hover,#mainTab6 a:hover, #mainTab7 a:hover {
color: #000000;
background-position: left -19px;
text-decoration: none;
}
#T1 #mainTab1 a:link, #T1 #mainTab1 a:visited, #T2 #mainTab2 a:link, #T2 #mainTab2 a:visited, #T3 #mainTab3 a:link, #T3 #mainTab3 a:visited, #T4 #mainTab4 a:link, #T4 #mainTab4 a:visited, #T5 #mainTab5 a:link, #T5 #mainTab5 a:visited, #T6 #mainTab6 a:link, #T6 #mainTab6 a:visited, #T7 #mainTab7 a:link, #T7 #mainTab7 a:visited {
color: #000000;
background-position: left -19px;
}
#subMenu {
position:absolute;
top:100px;
left: 0px;
margin: 0;
padding: 0;
background: #FFF;
height:15px;
width:100%;
}
#subMenu ul {
border: 0;
margin: 0;
padding: 0;
text-align: center;
}
#subMenu ul li {
float: left;
padding: 0;
margin: 0px 10px 0px 7px;
list-style-type: none;
}
#subMenu ul li a {
float: left;
padding: 0;
margin: 2px 1px 0px 0px;
color:#000066;
text-align: center;
display: block;
line-height: 16px;
font-size: 8pt;
font-weight:normal;
text-decoration: none;
width:auto;
height:15px;
letter-spacing: 0px;
}
#subMenu ul li a:hover {
text-decoration:underline;
color:#0A3C91;
}
#subMenu ul li a.current {
text-decoration:underline;
font-weight:bold;
color:#0A3C91;
}
#dateStamp {
position:absolute;
right:5px;
top:83px;
letter-spacing:0px;
font-size: 8pt;
font-weight:bold;
z-index:2;
}
#subContentWrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width:100%;
height:auto;
border-top:1px solid #000;
background: #fff;
line-height:normal;
}
/* For the text under column */
#subContentWrapper p {
padding: 0;
margin: 5px;
font-size:8pt;
}
/* IE7 1px rounding error. margin-left:-1px; */
/* 25% + 50% + 25% does not work in IE6. (24.8% + 50% + 24.8% works). Overwrote the code in the Home Page. */
#main3Column {
float: left;
width: 50%;
}
#leftColumn {
float:left;
width:25%;
margin-left:-1px;
}
#rightColumn {
float:right;
width:25%;
}
.columnBoxLeft {
padding: 0px 0px 0px 6px;
margin: 5px 0px 5px 0px;
}
.columnBoxMiddle {
padding: 0px 5px 0px 5px;
margin: 5px 0px 5px 0px;
}
.columnBoxRight {
padding: 0px 5px 0px 0px;
margin: 5px 0px 5px 0px;
}
/* Clears the column floats so the footer can center directly below them. */
.cleaner {
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0;
padding:0;
background:transparent;
margin-top: -1px;
overflow: hidden;
}
#revdate {
padding: 0px;
font-weight: normal;
font-size: 8pt;
height: 17px;
width: 100%;
text-align: center;
color: #354963;
}
/* Footer styles */
#mainFooter {
margin: 0px;
padding: 0px 0px;
background-color: #363459;
color: #fff;
font-weight: bold;
font-size: 7pt;
height: 25px;
border-top: 1px solid #000066;
text-align: center;
float: left;
clear:both;
width: 100%;
}
#mainFooter p {
margin: 0;
padding:0;
background: transparent;
color:#FFFFFF;
font-size:7pt;
font-weight:bold;
width:220px;
}
.rightFloat {
float:right;
text-align:right;
}
.leftFloat {
float:left;
text-align: left;
}
#mainFooter p.leftFloat {
margin:6px 0 0 4px;
}
#mainFooter p.rightFloat {
margin:0px 5px 0;
}
#mainFooter p span {
visibility: hidden;
}
Here is a simple page that I put up using the above CSS (main.css) which has the issue I described above. Use print preview and you will see all the 3 columns one below another. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Test Page</title> <link rel="stylesheet" type="text/css" href="main.css" media="screen"/> </head> <body> <div id="subContentWrapper"> <div id="leftColumn"> <div class="columnBox"> <h2 class="channeltitle">Left Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/leftColumn--> <div id="main3Column"> <div class="columnBox"> <h2 class="channeltitle">Main Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/main3Column--> <div id="rightColumn"> <div class="columnBox"> <h2 class="channeltitle">Right Column</h2> <p>Your Text Here</p> </div><!--/columnBox--> </div><!--/rightColumn--> </div> </body> </html> I am trying to print a table withing a loop. Whenever the loop reaches class = "end" I want the printer to start a new page. Code: <div id = "texter"> <table><td></td> . . . <td class="end">sdfs</td> <td>hh</td> . . . <td class="end">kkk</td> <form> <input type="button" value="Print this page" onClick="window.print()"> </form> </table> </div> Code: @charset "utf-8";
/* CSS Document */
body {
font-size: 10pt;
font:Arial, Helvetica, sans-serif
background-color: #FFFFFF;
margin: 0;
color:#000000;
background-color: #FFFFFF;
}
#texter {
width:auto;
height:auto;
position:absolute;
top:2.6mm;
left:3.9mm;
background-color:#333333;
}
input, button {
display:none;}
#texter.end {
page-break-after:always}
THANKS |
|||||||