CSS - Printing Browser Output To Fit A4 Paper
Hi..am a real newbie..so plz don't be too harsh on me
I have written an online declaration to be 'signed' by the user. The result is a web page which I want the user to print from their browser (like a certificate). What I want to know is: I have a backgroung jpg on the page and I want it to be printed out on A4 paper covering the WHOLE page (no margins or white spaces around the jpg). Just the jpg as the background with the table data in the middle (so it looks like a certificate). Is this possible? Or will I have to create a pdf or doc file so users can download their 'signed' certificate and print from there?? Any help/tips/advice will be greatly appreciated TIA Similar TutorialsHi, I am trying to remove the annoying url and page numbers that appear at the bottom of a page when you print a website - I want to do this using CSS so that anybody who prints my site wont get those annoying references, not change my browser. Anybody got any ideas on how to do so? Dom. Im deriving a list of photos with information from my database. I want to be able to print the webpage off without any of the information being broken up between pages. Since its coming from the database I cant just use page breaks cause then I get one image per page. Is there a solution to this? I have made the form and centered it on the web page, but when it prints the printed copy is offset to the right. I can fix this manually by changing the margins of the web page right before it prints, but it's ugly code and I have to put an underscore between "employee" and "signature"(ie Employee_Signature) so they stay on the same line. Is there a better way to do this? thanks I've tried to insert a horizontal drop down CSS menu in my layout. However, the menu bar displays about 10 pixels lower in Firefox than it does in IE. <a href="(URL address blocked: See forum rules)">Link</a> I checked the margins, padding but can not seem to find a way to get the menu to display at the same position in both browsers. Any guidance is very appreciated. thanks. My first post.... ok... First I would like to say THANK YOU to anyone who has time to bestow some knowledge to me on what I am sure is a highly noob-esqe situation. I would also like to say that I have thoroughly search this and other forums for my issue, unfortunately I dont think I understand CSS or any web design enough to comprehend the solutions given. I think this may require someone with the knowledge I lack to come down to my level... if you can bend that low.. and walk me thru layman term-style. Again thanks in advance for anytime spent helping out. That being said I was recently trying to jazz up my website that is hosted by a certain music community. I do a decent amount of business thru this site so I wanted to step up the interface a little and get away from using the standard page setup they give you. They do offer the option to edit CSS to construct your own for a little more customization. I jumped in, and after a few days of struggling, I got it looking how I wanted it. I was excited until I realized it looked different on almost every computer i visited the site on. My Background is fine, but the links to paypal and other content is all over the place(e.g. song player, twitter link, buttons) I have tweaked and tweaked, but have not been able to remedy this apparently common problem due to my lack of knowledge and experience. My only hope is to post the coding here and have a Smart Guy/Girl guide me in the right direction. I hope Im not asking too much guys... here goes (I know I can post my url here, how can I redirect you guys to veiw my site??) /********* SoundClick CSS Template (based on custom version Mon, Sep 28 2009) ***********/ Quote: /* general */ body {background: url((MyBGJPEGforbackground)); margin:0px;} body,div,tr,td,select,textarea,input,option {font-family:Verdana; font-size:11px;} a, a:link, a:visited {color:white; text-decoration:none;} a:hover {color:#ff0000; text-decoration:underline;} .pageFooter {clear:both; color:gray; padding:1px 0px 50px 20px;} .infoBox {width:650px; margin:50px auto; background:white; color:black; border:silver solid 1px; padding:30px; font-size:14px;} /* hardly used, its for error messages to user */ .infoBox .quotes {margin:20px; border:#4b4b4b dashed 1px; font-style:italic; padding:10px; background:;} /* main containers */ .mainTable {background: url((MainTableBGPicWentHere)) ; color:#999999; width:750px; margin-left:auto; margin-right:auto; text-align:center;} .mainContent {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:#999999; width:725px; float:left; overflow:hidden; margin:0px 0px 20px 5px;} /* IE6 doesnt support our preferred overflow:visible */ /* left navigation */ .navigation {background:url(/images/siteNav/transbgblocks/black/bg_0.png); color:white; width:300px; float:left; overflow:hidden; margin:10px 0px 20px 0px;} .navigation a:link, .navigation a:visited {color:#999999;} .navigation a:hover {color:#ffffff;} .navigationDivider {height:6px; line-height:6px; border-bottom:#232323 dashed 1px; margin-bottom:6px;} /* general elements */ .headline {background:transparent; color:transparent; font-weight:bold; border-bottom:transparent dashed 0px; border-top:transparent solid 0px; padding:330px 1px 50px 50px;} .headlineBig {font-size:22px; font-weight:normal;} .headlineSuppl {float:right; margin:0px 0px 0px 100px; color:#666666; font-size:11px; font-weight:normal;} /* for text/links on the right side of main headline (e.g. song count on main page) */ .headlineSuppl a:link, .headlineSuppl a:visited {color:#666666; text-decoration:none;} .headlineSuppl a:hover {color:black; text-decoration:underline;} .pageturner {background:; color:#cccccc; border:#4b4b4b solid 1px; text-align:right; padding:10px; font-size:13px; font-weight:normal;} /* pages menu (previous, next..), e.g. on music page, message board */ .pageturner .nonactive {color:#666666;} .pageturner a:link, .pageturner a:visited {color:#cccccc; text-decoration:none;} .pageturner a:hover {color:#ff0000; text-decoration:underline;} .listedPicsBox {border:#4b4b4b solid 1px; width:114px; height:160px; overflow:hidden; padding:2px 1px 4px 1px; margin:0px 4px 10px 4px; float:left; font-size:11px; text-align:center;} .listedPics {width:110px; height:125px; background-position: center center; background-repeat: no-repeat; margin:2px 0px 4px 0px; overflow:hidden} .breaker {height:1px; line-height:1px; clear:both} /* general color and font assets */ .color_supplemental {color:#666666;} /* used e.g. for song pages comments count */ .alternateBG0 {background:none;} /* used as background colors for comments */ .alternateBG1 {background:none;} /* alternate color */ /* main page (the default entry page) */ .mainContent .contHeadline {clear:left; font-size:16px; color:#cccccc; padding:1px 0px 2px 20px;} /* interview questions */ .mainContent .contText {clear:left; padding-left:15px;} .mainContent .contInterview {clear:left; padding-left:30px;} .mainContent .newsBox {clear:both; background:transparent; color:white; border:transparent solid 0px; margin:6px 20px 0px 20px; padding:100px;} /* main page: video box (different from video page) */ .videoBox_mainPage {padding:5px; margin:0px 100px 20px 100px;} .videoBox_mainPage .video {padding:5px; margin-bottom:10px;} .videoBox_mainPage .title {font-size:15px; text-align:center; margin-bottom:3px;} .videoBox_mainPage .shareLinks {float:right; padding:2px; border-bottom:#4b4b4b dashed 1px;} .videoBox_mainPage .labels {color:#666666; width:100px; padding-right:20px; text-align:right; float:left;} .videoBox_mainPage .info {padding-left:120px;} .videoBox_mainPage a:link, .videoBox_mainPage a:visited {font-size:13px; font-weight:normal; text-decoration:none;} .videoBox_mainPage a:hover {text-decoration:underline;} /* main page: upcoming shows */ .liveshowsBox {background:#cccccc; color:#000000; width:300px; margin:15px 2px 15px 10px; float:right; clear:right;} .liveshowsItems {padding:4px 0px 0px 0px; font-size:11px; clear:both;} .liveshowsBox a:link, .liveshowsBox a:visited {color:#000000; text-decoration:none;} .liveshowsBox a:hover {color:#666666; text-decoration:underline; cursorointer;} /* main page: standard song box on artist page (only this song box or the embedded player is used. Never both together) */ .playerBox {float:left; clear:left; padding-left:20px; margin:300px 0px 100px 0px;} .playerBox .playerHead {background:#000000; color:#cccccc; border-top:#4b4b4b solid 1px; border-bottom:#4b4b4b solid 1px; text-align:right; font-size:13px; padding:3px 5px 3px 3px;} .playerBox .playerHead a:link,.playerBox .playerHead a:visited {color:#666666; text-decoration:underline;} .playerBox .playerHead a:hover {color:#ffffff; text-decoration:underline;} .playerBox .songBox {background:#cccccc; border-bottom:#4b4b4b solid 1px; width:330px; padding:100px 0px 0px 1px; overflow:auto;} .playerBox .songBox .singleSong {color:#000000; font-size:13px; padding:1px;} .playerBox .songBox .singleSong:hover {background:#000000; color:#cccccc; cursorointer;} /* main page: VIP embedded player (only this embedded player or the standard song box is used. Never both together) */ .embeddedPlayer {margin:1px auto; width:750px;} /* main page: tabbed content headers (fans,stations) */ .tabbedCont_header li a:link, .tabbedCont_header li a:visited {background:#000000; color:#666666; text-decoration:none; margin:0px 20px 0px 0px; padding:3px 6px 3px 6px; border:#666666 solid 1px; border-bottom:none; } .tabbedCont_header li a:hover {color:white;} .tabbedCont_header li.selected a:link, .tabbedCont_header li.selected a:visited {background:#111111; color:#999999; border:#111111 solid 1px; border-top:#999999 solid 1px; font-weight:bold;} /* main page: fans, stations (tabbed content) */ .fansBox {padding:30px 20px 20px 20px; clear:both;} .fansBox a:link, .fansBox a:visited {} .fansBox a:hover {} .fancount {background:#111111; color:#666666; text-align:right; padding:3px 5px; margin-bottom:8px; font-size:11px; font-weight:normal; border-bottom:#232323 dashed 1px; border-top:#222222 solid 1px; } .fancount a:link, .fancount a:visited {color:#B8B8B8; text-decoration:none;} .fancount a:hover {color:#E6E6E6; text-decoration:none;} .fansBox_content {background:url(/images/siteNav/transbgblocks/black/bg_20.png) important; background:#111111;} .fansBoxLastLine {background:#111111; color:#666666; clear:both; text-align:right; padding:3px 5px; margin-top:8px; font-size:11px; font-weight:normal; border-bottom:#222222 solid 1px; border-top:#232323 dashed 1px;} .fansBoxLastLine a:link, .fansBoxLastLine a:visited {color:#B8B8B8; text-decoration:none;} .fansBoxLastLine a:hover {color:#E6E6E6; text-decoration:none;} .stationItem {clear:both; color:black; border-bottom:#4b4b4b dashed 1px; padding:0px 1px 0px 1px;} .stationPicBox {float:left;} .stationPics {width:70px; height:70px; background-position:center center; background-repeat: no-repeat; margin:0px 0px 1px 0px; overflow:hidden} .stationButtonsBox {float:left; padding:2px 15px 0px 5px; height:60px;} .stationsText {color:#999999; height:80px; overflow:hidden;} .stationlink a:link, .stationlink a:visited {color:#999999; font-size:16px; text-decoration:none;} .stationlink a:hover {color:#ff0000; text-decoration:underline;} /* music page */ .songsBox {border-bottom:#4b4b4b dashed 1px; width:510px; float:left; padding-bottom:2px; margin-bottom:10px;} .songsBox a:link, .songsBox a:visited {text-decoration:none;} .songsBox a:hover {text-decoration:underline;} a.songtitle:link, a.songtitle:visited {color:#999999; text-decoration:none; font-size:16px; font-weight:bold;} a.songtitle:hover {color:#ff0000; text-decoration:underline;} .songsBox .actionlinks {font-size:14px;} /* the links for full song info, add to station, rate this song... */ .songsBox .topSong {color:#666666; float:left; text-align:left; font-size:13px;} /* comments page */ .commentsWelcome {background:; color:#cccccc; margin:0px 20px 20px 20px; padding:20px; border:#4b4b4b solid 1px;} .commentsBox {border-bottom:#4b4b4b dashed 1px; padding-top:5px;} .commentsBox a:link, .commentsBox a:visited {text-decoration:none;} .commentsBox a:hover {text-decoration:underline;} .commentsBox .songComment {border-bottom:#4b4b4b dashed 1px; font-size:11px; padding:1px 3px; margin-bottom:5px;} .commentsBox .postdate {color:#666666; font-size:13px; font-weight:normal; text-align:right; margin:0px 5px 10px 0px;} .commentsBox .postdate a:link, .commentsBox .postdate a:visited {text-decoration:none;} /* for delete/edit links */ .commentsBox .postdate a:hover {text-decoration:underline;} .commentsBox .comment {font-size:14px; padding:0px 5px 0px 140px;} .commentsBox .bandSignature {border-top:#4b4b4b dashed 1px; color:#666666; width:310px; margin-top:15px; line-height:20px;} .commentsBox .ratingsBox {float:right; width:220px; border-left:#4b4b4b dashed 1px; margin-bottom:10px;} .ratingsBox .label {width:115px; text-align:right; float:left; padding-right:20px;} /* also used for .commentsPostBox .ratingsBox */ .commentsPostBox {padding:10px; margin:20px 0px; background:#FFCC99; color:#000000; border-top:black solid 2px; border-bottom:black solid 1px;} .commentsPostBox .ratingsBox {background:#ECECEC; color:#000000; clear:both; padding:7px 0px; margin:0px 250px 20px 30px;} /* video page */ .videoBox {background:black; color:#E0E0E0; padding:5px; line-height:22px;} .videoBox .video {padding:20px; margin-bottom:10px;} .videoBox .title {text-align:center; background:#121212; color:#F3F3F3; font-size:16px; padding:1px;} .videoBox .labels {color:#666666; width:200px; padding-right:20px; text-align:right; float:left;} .videoBox .info {float:left; width:440px;} .videoBox a:link, .videoBox a:visited {color:#0099CC; text-decoration:none; font-size:11px;} .videoBox a:hover {color:red; text-decoration:underline;} .videoListBox {border-top:#4b4b4b dashed 1px;} /* photo pages */ .photopage {background:black;} .selectedPhoto_box {text-align:center;} .selectedPhoto_box .selPhoto_title {background:#111111; color:#cccccc; border-bottom:#666666 solid 1px; font-size:15px; padding:4px;} .photolist {padding:10px 0px 0px 30px;} .photolist .photobox {background:none; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox .photo {height:150px; width:118px; overflow:hidden;} .photobox .photoComment {color:#444444; font-size:11px;} .photolist .photobox_on {background:#222222; float:left; width:118px; height:180px; margin:5px 0px 20px 10px; padding:5px 0px 10px 0px; overflow:hidden; cursorointer; text-align:center;} .photobox_on .photo {height:150px; width:118px; overflow:hidden;} .photobox_on .photoComment {color:#999999; font-size:11px;} /* reviews page */ .reviewsBox {padding:10px 30px; border-bottom:#4b4b4b dashed 1px;} .reviewsBox .rev_headline {color:#cccccc; font-size:16px; font-weight:bold;} .reviewsBox .rev_text {padding:5px 5px 5px 30px; font-size:14px;} .reviewsBox .rev_source {text-align:right; font-size:13px; color:#666666;} /* licensing page */ .licenseSummary {margin:0px 20px 20px 20px; padding:20px; background:; color:#cccccc; border:#4b4b4b solid 2px;} .licenses {margin-top:70px;} .licenses .headline {font-size:14px;} .lic_tableSongs {border:none;} .lic_tableSongs .columnHeaders td {border-bottom:#4b4b4b solid 1px; font-weight:bold; font-size:11px;} .lic_tableSongs tr td {border-bottom:#4b4b4b dashed 1px; padding:5px 0px;} /* widgets page */ .widgetMargin { padding:8px 0px 8px 35px;} .widgetSpacer {width:100; height:15px; clear:both;} /* tag cloud */ .tagCloud {padding:10px;} .tagCloud .cloudItem {float:left; padding:2px; white-space:nowrap; margin:0 6px 0 0;} .tagCloud .cloudItem:hover {background:#005782; color:white; cursorointer;} .tagCloud .cloudS10 {font-size:10px; color:#aaaaaa;} .tagCloud .cloudS20 {font-size:11px; color:#aaaaaa;} .tagCloud .cloudS30 {font-size:11px; color:#999999;} .tagCloud .cloudS40 {font-size:12px; color:#999999;} .tagCloud .cloudS50 {font-size:14px; color:#666666;} .tagCloud .cloudS60 {font-size:16px; color:#666666;} .tagCloud .cloudS70 {font-size:18px; color:#333333;} .tagCloud .cloudS80 {font-size:22px; color:#333333;} .tagCloud .cloudS90 {font-size:28px; color:#111111; } .tagCloud .cloudS100 {font-size:36px; color:#111111;} .tagCloudMore {padding:6px 0 0 0; margin:0 10px; text-align:center; border-top:#ccc solid 1px; font-size:11px;} .tagCloudMore a, .tagCloudMore a:link, .tagCloudMore a:visited {color:#999; text-decoration:none;} .tagCloudMore a:hover {color:red; text-decoration:underline; cursorointer;} I have a page that displays text of an article. It's all contained in a <DIV>, of course. I'd like the "Print" option the allow the user to print out just the article, and not the rest of the crap on the page (ads, navigation, so on.) I know vaguely that you can have alternate style sheets for printing and other types of display, but how to include just the text in the output? Hello, I was wondering how to link to print a single ID without printing anything else... thanx=) Hiya, This page http://www.magikwebs.co.uk/ranch/indian.html wasn't printing too good so I've set up a stylesheet for print only, and it has improved, but it still doesn't quite look right. It leaves a big gap on page 2 and misses a line out. It looks 100% fine in Firefox. I guess it's an IE bug. Anyone know what it is and how to avoid it? Thanks, John Hi ! I've read that it's possible with CSS to adapt the visual style of a web page on the output medium. If I didn't understand that completely wrong, it means that with CSS I can format a String like "Hello World" to give him font size 10 in my browser and font size 20 if i print the page. Is this correct ? Does someone of you habe any kind of coding example therefore ? That would be great TIA Gawan Hi folks, I am working on online reporting system and was wondering if anyone could help me. The report searches through 25000 records to show a report of profit and costing etc, the problem I am having is when the client wants to print the report off they want a logo at the top of every page, the report is always different sizes depending on the search criteria they enter so Is there a way in php I can print the long report out with a header at the top of every printed page. I hope this makes sense and thanks to anyone whoe replies. LMD I have a div that contains multiple fieldsets and every two fieldsets I add a page-break-after style. After the first page prints, the legend tags for each fieldset on subsequent pages are displayed completely inside the fieldset border. My code essentially passes HTMLTidy validation. The only issues I have are unclosed input tags, alt tags for images, using the "&" sign and no title tag. If those issues aren't causing the problem, and I can't see how they are, I don't know what to check next. I have decided to develop CSS to style my web pages for printing. So far I am getting the results I desire from Firefox 2.0. However I am having an issue with IE 6. If your open the following page in IE: cambridgema.gov/cdd/test/faq_test.html Go to print preview, move to the second print page and scroll to the bottom you will see that the page break splits a single line of text between two printed pages. Any suggestions about how to stop this? Thanks Cliff Ok, I've google a bit, and come up with http://home.tampabay.rn.com/bmerkey...scape-test.html, but it seems to fail if I try printing tables in Landscape. It's for an intranet ap, using IE6 predominantly but also needs to work in Moz. Does anyone know of a way to do this with tables? Because these are difficult issues to resolve from W3C documentation, I thought I'd post my notes on printing for HTML (which apply likewise to saving HTML as PDF, etc., or loading HTML pages into further client applications, to be saved as other formats): In printing HTML output, user agents ("browsers") will not honor usual CSS code, dedicated to screen output. Similarly, functions such as loading an HTML file into a document editor or saving an HTML page to PDF will not honor screen-dedicated CSS, either. Browsers are not equipped for instance with logic to determine whether to discard left and right margins or padding, surrounding the usual web page. Similarly, some content may be undesirable to print, as is. Images for instance may need to be scaled to a different size; font-sizes and weights may need to be adjusted, and so forth. The whole trick to accommodating the separate needs of screen and print output is to deploy separate media-specific ("screen"/"print") style sheets. When you save an HTML page as PDF, or when you load an HTML page into a document, the client application honors the CSS of the "print"-specific implementation. ------------------------------------------------- LINKING IN SEPARATE CSS FILES: For printing and file conversion functions to honor CSS, you have to link in media-specific style sheets as follows (media="screen" and media="print"): <head> <link href="css-pfmpe.css" type="text/css"rel="stylesheet" media="screen" /> <link href="css-pfmpe-print.css" type="text/css"rel="stylesheet" media="print" /> </head> ------------------------------------------------- ENCLOSURE OF MEDIA-SPECIFIC CSS CODE IN EACH FILE: All the CSS declarations of your "screen" style sheet (css-pfmpe.css) must be enclosed as follows: @media screen { /* all css code here */ } All the CSS declarations of your "print" style sheet (css-pfmpe-print.css) must be enclosed as follows: @media print { /* all css code here */ } ------------------------------------------------- GENERAL APPROACH TO MODIFYING THE PRINT-SPECIFIC CSS FILE: Assuming you have refined your screen-specific CSS to intended behavior, you would generally save a separate, further copy of your "screen" style sheet as the latter "print" implementation. You would then change the top "@media screen" expression to read instead, "@media print." The general focus of modification within the print-specific CSS file is as follows: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). This reduces the left and right margins to default printing or file conversion values (which you may have no control over, even in the client application's preferences/settings). A screen-specific CSS implementation for instance will generally limit itself to some column width which, when/if printed, may result in huge left and right page margins. These are reduced by your modifications of the print-specific CSS, so that paper is used to best advantage. 2. Re-scaling fonts. Owing to translation differences, screen fonts are generally too large for printed media. Depending on the screen sizes you display, you may: a. determine a general scaling factor to apply to your font-size specifications; b. and manually apply that scale to converted font-size specifications. 3. Re-scaling images. You will generally want to apply a manually calculated scale to your images as well. a. This means that standard images (used in many pages for instance) may require separate image-specific styles, indicating size; and that height and width specifications must be avoided in scaled images, in your HTML markup. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. 5. Indicating whether to print content. Content which you don't want/need to be printed can be marked, "display: none;". ------------------------------------------------- TYPICAL CHANGES IN EACH PRINT-SPECIFIC CSS FILE: The general manner of addressing each concern is: 1. Eliminating outer, left and right margins or padding from exterior (enclosing) block constructs (within which your further block constructs are displayed). a. Follow a pattern of engineering with an outer enclosing block, determining either margins or padding, and/or width of the outer block. b. Set the margins or padding to 0, and/or the width to 100% in the print-specific CSS. 2. Re-scaling fonts. a. Determine a general scaling factor to apply to your font-size specifications. For instance, if your screen output declares a font-size of 17px for a given style class, and experiments determine that the desirable size ratio for print output is 11px, open your calculator, enter "11," divide by "17," store the result (ratio) in memory, and multiply your further font-sizes by the ratio to get resultant sizes. You will discover a minimum size in this process. If the answer is less than the minimum, apply the minimum instead. b. Once you have calculated each scaled font-size, use global search-and-replace, starting with the smallest sizes to convert, and progressing to the larger. This will avoid double-processing errors (modifying the result of previous scaling, versus your intention to scale only unscaled declarations. 3. Re-scaling images. a. Apply image-specific styles, indicating height and width in the style declaration. Scale height, width and margins as needed for print output. 4. Indicating page break preferences. Print-specific page break specifications (not needed in your screen CSS) indicate whether page breaks can be inserted before, after or within block content. These declarations are generally made for the base style, so that properties are inherited to subclasses (where exceptions can be declared, if desirable): a. HEADINGS - TITLES, SUBTITLES Break before, but not within, nor after (next paragraph sticks to title, or title breaks off to next page with succeeding paragraph). hx.MyStyle or p.MyStyle { page-break-after: avoid; page-break-befo auto; page-break-inside: avoid; } b. IMAGE Break before or after, but never within image. img { page-break-after: auto; page-break-befo auto; page-break-inside: avoid; } c. LIST ITEM Break before, after, or within (but not in area occupied by image). li { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } d. PARAGRAPH Break before, after, or within (but not in area occupied by image). p { page-break-after: auto; page-break-befo auto; page-break-inside: auto; } 5. Indicating whether to print content. a. Content which you don't want/need to be printed can be marked: BaseClass or BaseClass.Subclass { display: none; } Typical objects of this treatment for instance might be RSS subscription links. ------------------------------------------------- PRINTING BACKGROUND COLORS OR IMAGES: Note that according to W3C standards, printing of background colors or images is optional to the end user; and that by default, each are disabled in printer configuration options. It may be desirable to enable background colors or images for saving an HTML page to PDF for instance, while it may be undesirable for printed output (owing perhaps to vast consumption of ink). To enable either for a particular purpose, access your printer preferences. I have a form that users search for data. The query results are presented to them inside a table. Up until this point, there were only a handful of results in the DB and so printing was not a problem. However, now that the DB has grown, there's about a couple pages of data. When the user prints this table, only the first page gets printed. All subsequent pages are ignored. The markup looks something like below. I have 2 fieldsets - one for the form and the other for the results shown inside a table. Code: <fieldset> <form name="searchForm".....> <Insert form fields here> </form> </fieldset> <fieldset> <div id="searchResults"> <table> <INSERT header row and data rows here> </table> </div> </fieldset> I am not sure where to even begin looking for the problem. Is it an HTML issue or a CSS issue? Thanks! I made a form that I wanted to print. It is a page with a table with most of it formated with CSS. When I print however all that shows is the text, nothing that is defined with CSS is acknowledge, not the font-family, table borders, etc. I tried it with Safari and Firefox, both look the same. What is the deal? On our new test site for our colleges online catalog I've been charged with trying to fix an issue we are having with some versions of Netscape on some PC's(not mac) where our CSS printing style isn't working....We can't pin point what causes the problem and some pages have the error and others do not, some pages print fine in 7.1 and not 7.2 or 8.1 (in 7.2/8.1 almost everything longer than one page in depth does not print properly) and its really nerve racking. If anyone has experienced a similar problem or knows of a possible solution I would be eternally in thier debt. The link is http://www.ramapo.edu/test/catalog_06_07/ and the pages that have print problems in netscape are generally longer than a page in depth are mostly major requirements pages like. http://www.ramapo.edu/test/catalog_06_07/academicPrograms/TAS/iss_req_major.html When the problem occurs the printer will usually print a blank page with just the url and date (header/footer) or will print nothing but 1 or 2 blank pages with the url/date and this can be seen in preview (no need to waste paper). Here is what it looks like when it properly prints: http://phobos.ramapo.edu/~chdonnel/properprinting.jpg Here is what it looks like when netscape masacres it: http://phobos.ramapo.edu/~chdonnel/badprinting.jpg Thanks in advance, Chris Hey guys, I'm working on a website and I have been notified by the client that the page does not print correctly in IE. Prints just fine in Mozilla however. I tested this and sure enough it cuts off the rightmost 100 or so pixels. The entire page exists in a table that is centered and set to be 729 pixels wide. I tried attaching an extra stylesheet: Code: <link rel="stylesheet" type="text/css" media="print" href="dummy.css"> but that has no effect. Even when I use the other stylesheet to move the content to the top left corner of the page with no borders, it still prints the page centered and lops off the rightmost 100 or so pixels. Any ideas? (telling them to print in another browser is not an option unfortunately) Hi there...I got a problem with printing my html page..why dosen't follow the setting the my html...When i print this page it prints in portrait..Help me pls.. Code: <html><head><title>size</title> <style type="text/css"> @page { size:landscape; } </style> </head><body bgcolor="#FFFFFF" text="#000000"> <p>This page is displayed on your screen as a normal web page. However, if your browser knows the style sheet properties for page layout, try printing this file by using the print command in the file menu of your web browser.</p> </body></html> |