I am having an issue with HTML elements not printing when positioned absolutely when they extend beyond the first page. I am working on some foreign tax refund forms. The forms are cut into multiple jpg images, so that I can position them on the HTML page, so that they print properly (page1, page2, etc). The information to complete the forms is then positioned using position: absolute and a z-index of +1.
Here is an example code of my problem:
(*note: I am using Mac OS X 10.5.6 and Firefox 3.0.8) -
<html>
-
<body>
-
<div id="1" STYLE="position: absolute; top: 0px; left: 0px;">test1</div>
-
<div id="2" STYLE="position: absolute; top: 1000px; left: 0px;">test2</div>
-
</body>
-
</html>
-
Everything displays fine in the browser, but when I go to print, anything past page one, that is aligned using absolute, will not print. I have tried saving directly to .pdf as well (since I have a mac), changed the print settings to include background images and colors (stab in the dark), and have tried using relative and static, but then the images that are the form do not show properly (they get pushed down the page).
If you need more code, let me know. Also, the reason I am using inline css is because these divs are actually created on the fly, and trying to create a stylesheet to apply to each div(since the data is always going to be changing) will not work.
7  20454 
Alright, so it gets more interesting.
I've been trying to get the printing to work, and tried setting up the absolute positioned element within a relative positioned element (since an absolute positioned element is based on its most recent ancestor with positioning applied)
Here was my first test: -
<html>
-
<body>
-
<div id="1" STYLE="position: absolute; top: 0px; left: 0px;">test1</div>
-
-
<div id="3" STYLE="position: relative; margin-top: 1000px;">test3
-
<div id="2" STYLE="position: absolute; top: 10px; left: 0px;">test2</div>
-
</div>
-
</body>
-
</html>
-
It would print a blank second page.
So, I tried this: -
<html>
-
<body>
-
<div id="1" STYLE="position: absolute; top: 0px; left: 0px;">test1</div>
-
<div id="4" STYLE="margin-top: 1000px;">test4</div>
-
<div id="3" STYLE="position: relative; margin-top: 1000px;">test3
-
<div id="2" STYLE="position: absolute; top: 10px; left: 0px;">test2</div>
-
</div>
-
</body>
-
</html>
-
This kind of works. It displays in the browser really oddly, but it will print two pages, with test2 and test 3 at the top of the second page....
Still don't know why, and I would like to so that I can get the browser to display it properly AND the page to print properly...mayb e I should use two different style sheets, one for screen and one for print? Then I just wouldn't display the <div id="4"> when its on screen, but its there for print?
The solution is actually pretty simple (kicking myself).
Since I am using images, I am placing a div around each image that needs to be displayed to create the form. The div is positioned using position: relative. So, both the image AND the information are placed within the div. Then, the absolute positioned information is adjusted based on the div it is now contained in, and prints as well.
Moral of the story:
Placing an HTML element with absolute position relative to the top of the page will not translate correctly into page breaks (at least with Mac OS X 10.5.6 and Firefox 3.0.8), so, place HTML elements with absolute position within a relatively placed HTML element.
Thanks if you read all of this. Hope it helps someone else.
Interesting thread. I've got a similar problem.
I've got a web page in which I want to display images that are precisely positioned on a number of pages. Here's the code: - <html lang="en" dir="ltr" >
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
-
<style type="text/css">
-
@page { size: portrait; }
-
@media all
-
{
-
.page {
-
position: relative;
-
page-break-after: always; }
-
-
.finalpage { position: relative; }
-
}
-
</style>
-
-
</head>
-
<body>
-
<div class="page" style="top:0px;">
-
<div style="position:absolute; left:500px; top:0px;">
-
<img src="img1.jpg" /></div>
-
<div style="position:absolute; left:0px; top:0px;">
-
<img src="img2.jpg" /></div>
-
<div style="position:absolute; left:50px; top:400px;">
-
<img src="img3.jpg" /></div>
-
</div> <!-- closes the 1st page -->
-
<div class="page" style="top:1414px;">
-
<div style="position:absolute; left:250px; top:300px;">
-
<img src="img4.jpg" /></div>
-
</div> <!-- closes the 2nd page -->
-
</body></html>
What should happen is the web page should show img1 near the top-right of page 1, img2 on the top-left of page 1, img3 around in the middle of page 1, and img4 on page 2.
What actually happens is that the images appear where expected on screen, but in Print Preview only the 1st page is rendered: the 2nd page doesn't appear. I'm using Firefox 3.0.10 on Windows XP.
Since each image is precisely placed within its page, each page div needs to have "position:absol ute" or "position:relat ive". I chose relative. One of my CSS rules should force a page break after the 1st page.
I've trawled the web but with no luck. Does anyone have any ideas?
I have the same problem and I can´t solve the problem yet... Any suggestion?
I wish I could be helpful but haven't dealt with this in a long time. The thing to remember is what you see on a web page is not always what you'll get on the printed page, particularly when it crosses page boundaries.
I'm sure I have some articles and/or links about that but I'd have to look them up.
I have "solved" my problem... I had to use a div with position relative and inside it I have put my real page... In this div, at the first page the margin-top=0 and in the others I have put margin-top=900, but this wasn´t enough to solve the problem, so I put a <br> inside the div, and then the problem was solved... The screen is exactly the same as the printed page!
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: mickjames |
last post by:
Hi,
I'd like to include the whole web page content (as opposed to just the
headlines) into RSS/XML to enable people to read them via rss feed
readers.
Question: how to convert HTML elements such as href, img, b, p, etc
into XML?
I've seen someone use the following in their RSS feed but I don't like
it because <pre> doesn't produce a...
|
by: Philipp Lenssen |
last post by:
Is it possible in IE6+NS7 to center-align a div of fixed width which
itself contains elements which use "position: absolute"?
Using "margin-left: auto" and "margin-right: auto" works well to center
something, but the absolute-positioned contents of the outside layer
will be stuck to the left of the window...!
Thanks a lot!
--
Google...
|
by: mike eli |
last post by:
Hi,
I have several absolute positioned elements inside an absolute
positioned DIV.
I would like one of the nested elements to have a dynamic width. I set
it's left and right attributes to 5, so the the element should have a
width = parentWidth - 10; This is the desired behaviour, but it won't
work. I still have to specify a width or the...
|
by: Luke |
last post by:
Elements with name attribute:
form, input, textarea, a, frame, iframe, button, select, map, meta,
applet, object, param, img (if you know more reply...)
Methods of addresing html elements:
<form name="myform">
<input name="myinput" />
</form>
1. var input = document.forms.myform.myinput;//from nn3+
2. var input =...
|
by: Linus Martinsson |
last post by:
How can I change attribute in html elements from my aspx.cs page?
For example if I want to change the src-attribute in an iframe.
//Linus
| | |
by: Urs Vogel |
last post by:
Hi
how do I add HTML elements dynamically to my page? Is there some similar way
like with ASPX controls, or do I have to render them out in a custom
control?
Thanks, Urs
|
by: shu fenghua |
last post by:
The problem is when i want to put an element("a" in my code) into an absolute positioned element and i also want this element("a") has a fixed height, then ie6 will render this element("a") as a common block element with a 100% width. I also found that if any css property can make element hasLayout added to the element in absolute positioned...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it. ...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...
| |
