|
CSS - Printing Problem Image Needs To Break In Two
Aloha,
I am trying to change the way a page on my site is printed. Currently, I have a Google ad that is far enough down the page that it causes too much content to be pushed to page 2. I know I should post a link to the page, but I am still developing it and I only have it on my laptop rght now. Here are two screen clips from my print dialog that should illustrate the problem clearly: print1.jpg print2.jpg How do I allow the printer to go ahead and split the image in two putting the top part of the image at the bottom of page 1 and the bottom of the image part on page 2? TIA, Thad Similar TutorialsI 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) I am trying to allow a right aligned image break out of my footer. So far it's just breaking out, but under rather than over. I.e: Code:
#footer {
clear:both;
width:100%;
/* green bg footer image */
background-image: url(../img/footer_bg.gif);
background-repeat: repeat-x;
}
Code: <img style='float: right' src='src/to/pizza-pic.png' /> What I'm trying to achieve is to have the green footer at the bottom of the page and the pizza to appear in at the bottom also, but peeping over the green footer. Do you know how I can achieve this? Thanks in advance for any help Hey guys, Here's my problem: http://www.3rdcoastpc.com/moonstoys/ Basically I want the menu in the rounded rectangle area, not underneath (outside) of it. You can see what's happening in the URL. If I use a span tag instead of a div in the head_content class, the background (the right corner of the rounded rectangle) doesn't show. I'm not sure what's going on here because in my HTML I'm putting the <ul> tags right after the logo image, so I would think that it would sit next to the logo and not underneath it. I'm just confused as this is my first attempt at doing a tableless design. Here's my css: http://www.3rdcoastpc.com/moonstoys/main.css and the HTML: http://www.3rdcoastpc.com/moonstoys/index.html Thanks in advance! Dustin I have an internal document that depends on page-break-after to separate the pages when it is printed. The attribute page-break-after:always had been working just fine. Now, I've noticed it is getting ignored on some users machines that have updated to IE8. I've never seen this problem in IE7 or Firefox, and I've also seen it work at times on IE8, though rarely. For the most part, users on IE8 are getting a document that treats it as only one page and will only print that first of 14 pages. Does anyone know about problems with this attribute in IE8 and what might need to be done to fix it. Hi, I'm having a problem with Firefox and a print-friendly stylesheet. Basically, I'm printing out a load of images - 9 per page, in 3 rows of 3. After 9 images, I'm printing a <div style="page-break-after:always;"></div> However, the problem I'm getting is that the 10th image, which appears at the top left of the next page, is missing. All of the other images on the page print, apart from that one. Has anyone else had the same problem, and is there a way around it. Other threads I've Googled suggest it's a bug in CSS2, but my boss/client won't accept that as an answer! Thanks in advance, Psycle This is probably the dumbest question ever, but I hardly ever work on GUI stuff anymore so here it goes... I have some buttons that have their size (height and width) controlled by CSS. The text I'm putting on them is sometimes too long to fit unless it would wrap, but it doesn't want to wrap, it wants to disappear off the side of the button. Is there a way to explicity tell it to wrap if it needs to, or even insert a "new line" character? Thanks! Hi, I am having problems with my code. I am trying to print a badge. So what i am doing is in one cell of the table. I have a image that i want to be centered in the cell and then i have text below the image that i want to be centered in reference to the image The image is not centered and then the text is also not centered can someone tell me what i am doing wrong Code:
table {
table-layout:fixed;
}
table.pagebreak
{
page-break-befo always;
}
table.nopagebreak
{
page-break-befo ;
}
td {
width:381.73px;
height:287.244px;
padding-left:24.56px;
border-left:white dashed 1px;
border-bottom:white dashed 1px;
border-collapse: collapse;
}
.imglineup
{
text-align:center;
width:300px;
display:block;
}
.textlineup
{
text-align:center;
display:block;
}
.nametd
{
width:381.73px;
text-align:center;
height:287.244px;
margin: 0px 50px 0px 50px;
}
the cell of the table is 381.73px wide and the image thats centered is 300px wide so here is my code Code: <tr > <td class="nametd" > <img src="/images/bdg.jpg" class="imglineup"><br/> <div class="textlineup"> <span style="font-size:40pt;">Joe </span><br/> <span style="font-size:40pt;">Smith</span><br/> <span style="font-size:20pt;">CEO</span><br/> <span style="font-size:21pt;">Quest Inc</span> </div> </td> thank you todd 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 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 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>
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? Due to letter-spacing double break won't work in IE. And triple break works as it is double break. How to solve this problem? w3 css-validation tool Quote: context:html body Property word-break doesn't exist : break-all it doesnt validates ,, why?? It changes both attribute in ie and firefox,, I use it because when people choose bigger text sizes my divs mix up because of long words so I use word-break. What do you prefer me?? Live without validation If I use word-break:break-all solves the problem when I enter a word without spaces (for e.g pppppppppppppppppppppppppppppppppppppppppppp), it breaks and coming in line by line like (ppppppp ppppppp ppppp) as I required. If I use word-break-cjk solves the problem when I enter a word without spaces (for e.g Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- Large value at Notes to Approvers distubs the UI on Approval tracking page.Transfer Approval flow- La), it breaks the word as I required. But I need both scenarios should work. Which style I need to use...? How do I create two div blocks that lay side by side from each other? Right now I have two "column" divs (one left and one right), and separate "box" div that contain the content. CSS: Code: div#frame
{
width: 40%;
margin-top: auto;
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#title
{
width: 100%;
background-color: black;
color: white;
}
div.box
{
width: 100%;
border-style: solid;
border-width: 5px;
border-right-color: black;
border-bottom-color: black;
border-left-color: white;
border-top-color: white;
}
div#left
{
width: 45%;
}
div#right
{
width: 45%;
margin-left: 50%;
}
HTML: Code:
<div id="frame">
<!--------------------------->
<div id="left">
<div class="box">
<div id="title">NEWS</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
<div class="box">
<div id="title">RECENT GAMES</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
</div>
<!--------------------------->
<div id="right">
<div class="box">
<div id="title">NEWS</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jklfsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
<div class="box">
<div id="title">RECENT GAMES</div>
fsdf ksdlfj klsdjf l;ksdjf skdfj sdf klsdf klsdf jksd jksdfjklsdf kljsdfjkl sdl;ksdfj l;ksd flsdf sdf sdfjklsdf jklsd jkl</div>
</div>
</div>
Link: http://mushsauce.110mb.com/art.html Anyone know a way to put a page break in a standard html/php webpage? I am printing invoices and need to break to another page after a certain amount of line items are listed. The question is "what effect will page-break-after have on screen media"? Am I correct when I say that it will have no effect? I believe that page-break-after only affects print media, but I have poor reading comprehension and would just like to double check. Question for the CSS gurus: I have a site that is listing several steps to complete a process, and each step is displayed in a table. The problem is that IE6 (I believe my workplace uses 6, anyway) doesn't want to break it properly - at times it breaks it in the middle of the tables. I don't want to manually enter the page breaks each time (as I know I can do with page-break-xxx: always), because future updates may be done by someone who has absolutely no coding experience. Any thoughts on how to achieve what I'm looking for in IE6? Thanks! |
|||||||