CSS - Problems Printing A Css Styled Page
I have a simple page layout using div's and CSS, but the alignment becomes screwed up when printing the page. My CSS for the layout is:
#OneColumn { width:575px; background:#fff; } #LeftColumn { float:left; width:458px; background:#fff; padding-top: 15px; } #RightColumn { float: right; width:113px; background:#fff; text-align:center; padding-top: 38px; font-family: Arial; font-size: 10px; color: #000; } My code is formatted in the same order so, on the actual page OneColumn is on top of the left and right columns. If the page is short (less than on page) it prints and looks fine in print preview. Problem 1: In IE 6 If the page is longer than one page when printed the information that is in OneColumn is on the first page of the printout and the rest of the information (from the left and right column) is on the next pages. Problem 2: In IE 6 and Mozilla Firefox 0.8 Also, the right column is used to display thumbnail-pics that correlate to the text in the left column. At times I used styles to space the pictures. Here is one of them: .spacePic { margin-top: 95px } This works fine except for when printing the images, they generally are printed lower than they apprear on the screen. Any suggestions or tips would be appreciated. Thanks for your help! Casey Similar TutorialsIm 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? Hi folks. I've just encountered some problems printing pages in Internet Explorer SP2. The pages print fine in SP1, and virtually every other browser I've tried. An example page can be found he http://www.unbc.ca/hr/jobs/staff/0504cu.html The problem under SP2 is the menu is pushed over and overlaps the main page content. Can anyone tell me if this might be caused by a quick of SP2? The fact that it renders and prints correctly in EVERY other browser I've tried leads me to point the finger at SP2, but I can't say for sure. Can anyone offer any advice on this? Cheers and thanks in advance, Pablo Hi I need to print a webpage, but I dont want it to print the date and url and title of the page on the top and bottom of the page. And also is there a way that you can print a page with buttons, without printing the buttons? 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) 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 am trying to update an old site with lots of pages, I am trying to create a printing stylesheet (first time as you may guess) I have managed to exclude what I do not want to print but some text is still running off the RHS of the page. I have tried playing with page widths and margins but to no effect, any suggestions? this is what I currently have: TBODY { position: static; width: 700px; margin: 0 auto; } When printing at the top there is Page 1 of 1 and at the bottom the web address comes up, is there a way to get rid of these? Regards Hi everyone, Having some problems with CSS printing. I am trying to get a webpage to print in B4, no print margins, no header or footer. There is supposively a way to do this in CSS with the @page properties. I've tried the examples from the w3c site but to no avail. Does anyone have any code that definitely works for internet explorer? Thanks, Dave. Hi, 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. I have a report that prints a list o people and a select box that will run the same list in a form format (all on one page) so that the user can print this off and get one form per page. I am using page-break after always as part of a div that contains the info to be printed (this is a loop from a db query). On my printer and a few others it works like a charm, but I have a user that gets the first page (first loop) no problem, but after that he gets parts of the pages when he prints (they display fine on the screen in the browser - IE6). Some pages come out with half the info (the bottom half is missing. Anyone ever hear of this issue? He is using WinXP IE 6 Printer is HP 855 (or something like that) Hi, I am trying to find a way to print address labels from a web page. The page will either be ASP or ASP.NET. Is it possible to get enough control over the print layout to create consistent labels? The browser will be IE6 and the printer will be printing onto standard address labels that you buy for this sort of thing. If it is possible, could someone please point me in the right direction, I am stumped. Thanks, Matt I am trying to print an HTML page in the landscape orientation using a css print style sheet. I have added the link to the style sheet in my document
Code: <link rel="stylesheet" href="print.css" type="text/css" media="print" /> the code in the stylesheet itself is Code: @page {size: landscape; margin: 0.25in;} When I print the page from Internet Explorer the settings from my browser are used. What do I need to do to have the page printed in the landscaped orientation without the user configuring their browser settings? Hello, I'm design the web page printing feature, i apply a print button for trigger out the window.print() javascript command and it will set the button.style.display to none after button clicked. Whereas, It is happen when user using the CRTL-P and the button will continuous remain on printing paper . I wonder any optimize way to solve this problem? Can it be solve in CSS styling? 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! I am trying to copy a pdf, and it is imperitive that the pages match up: page 1 on the pdf is page 1 on the html file when printed and so on. I am using font 12pt sizes. if it prints out correctly on my computer will it print out correctly on all since I am using the pt instead of something relative like <font size=3>? if this will not work for all then does anyone have any recomendations on how to do it? Hi, Can someone give me an example of a table styled with css that looks better than the standard html thing. I am trying to get a table with alternate colored rows and a thin line between the cells, and good looking cell headings. This is a small thing, but it's kind of annoying. I'm using CSS to make some buttons on my site purty. And they are purty. The problem comes in when I set a buttons state to "disabled". IE o' so nicely makes the button "grayed out". Mozilla browsers do squat. Observe he http://www.drcwbt.com/codetests/disabledbutton.htm I was hoping I might be able to skirt around this problem with the pseudo class ":disabled" but it appears that this is too new still and nobody supports it. Any ideas on how to "gray out" in Mozilla? I want to place a styled box with rounded corners around text in a heading. The problem is that the the heading may have one, two or three lines and I can't seem to get my box to adjust. Here is my code: I appreciate any help you can provide! Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Title</title> <style type="text/css" media="all"> .specialHeader { background: #F4F1F1 url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 0; padding: 1px 0 0 0; } .specialHeader h2 { display: block; margin: 10px 0 0 0; padding: 0 0 0 10px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingA.gif) no-repeat scroll 0 100%; } .specialHeader span { display: block; margin: 0; width: 100%; padding: 1px; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 0; } .specialHeader em { text-transform: uppercase; display: block; text-style: normal; margin: 10px 0 0 10px; padding: 0; font-size: 18px; font-family: 'Trebuchet MS', Tahoma, sans-serif; color: #98002E; font-weight: 300; background: transparent url(http://d9qjx79zqpo3.googlepages.com/specialHeadingB.gif) no-repeat scroll 100% 100%; } </style> </head> <body> <div class="specialHeader"><h2><span><em>Hello World</em></span></h2></div> <div style="margin: 50px; width: 600px;"> <div class="specialHeader"><h2><span><em>Two<br />Lines</em></span></h2></div> </div> <div style="margin: 50px; width: 300px;"> <div class="specialHeader"><h2><span><em>This Has<br />Three<br />Lines</em></span></h2></div> </div> </body> </html> When I add a gradient image to my submit button it works fine in IE but won't depress in Firefox or Netscape. The form action works OK, but it's just the button doesn't do anything on screen with the mouse click...What am I doing wrong? input.btn{ border-style: outset; border-width: thin; border-color:#CCFFFF; color:black; font-size: 60%; font-weight:bold; background: url(images/gradient.jpg) repeat-x; } Hey guys, When i apply a stylesheet to this page. http://jessup.oraclestudio.com.au/i...p?page=coporate the link on the left hand side 'Forensic Accounting' doesnt appear to work in IE but work fine with no style sheet. By not work i mean it gets styled but doesnt function as a link. any ideas ??? Code: a:link { color: #333333; font-size: 11px; } a:hover { color: #333333; font-size: 11px; } a:visited { color: #333333; font-size: 11px; } |