CSS - Setup Request

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

this was my target

I got a image with two transparant shapes.
Behind those shapes I would like to show 2 other images.

|-------1-------|
| |-----| |----| |
| |...2..| |..3..| |
| |____| |____| |
|_____________|

Image 1 should be on top z-Index
Image 2 should under image 1, a part of the image should be visible.
Image 3 should under image 1, a part of the image should be visible.

Image 2 and 3 should be dynamically replaceable.

My solution

The image in front has transparant spaces at 20,40 and 20,120 both 60,60 sized.
Each Image do have a offset, in case a part of the image should be displayed not starting from 0,0.

Code:

This is a drawing.
_____1_____
|  _____   |
| |     |  |
| |..2..|  |
| |_____|  |
|__________|

1. whole image ( should be bigger then 60,60 ).
2. the part that I want to show ( 60, 60 ).

With javascript I can hide/unhide the images and I use the imageLn or imageRn as selector id

I hope you can use it also.


My Style


Code:

#headerContainer {
	 float: left;
	 position: relative;
	 z-index:4;
	 width: 200px;
	 height: 100px }
#headerImageLeft {
	 position: absolute;
	 z-index: -1;
	 top: 20px;
	 left: 40px;
	 width: 60px;
	 height: 60px;
	 display: inline }
#headerImageRight {
	 left: 120px;
	 top: 20px;
	 width: 60px;
	 height: 60px;
	 z-index:-2;
	 position: absolute;
	 display: inline;
	}

Html code


Code:

<td>
<div id="headerContainer">
	 <img src="header-kop-test.gif" alt="" width = "200" height="100" />
	 <div id="headerImageLeft" >
		 <div id="imageL1" style="top:-8px;left:-20px;position:absolute;">
			<img src="header-links-test.gif" alt="" />
		 </div>
		 <div id="imageL2" style="top:-10px;left:-10px;position:absolute;">
			<img src="header-links-test2.gif" alt="" />
		 </div>
	 </div>
	 <div id="headerImageRight" >
		<div id="imageR1" style="top:-30px;left:0px;position:absolute;">
		 <img src="header-rechts-test.gif" alt="" />
		</div>
		<div id="imageR2" style="top:-10px;left:-18px;position:absolute;">
		 <img src="header-rechts-test2.gif" alt="" />
		</div>
	 </div>
</div>
</td>

My questions:
Can I optimize this code?
Is this working on the most browsers? or are there know issues?

Greetz and thanks

R