Printing HTML Form using window.print()

Printing HTML Form using window.print()

I was charged with the task of building a HTML Form link to a DB. Here no
problem.
The problem is I need the user to be able to print that form. So I build a
"Print button" using a HTML button and I put some JQuery behind it so the
form would format correctly (remove some borders, background-images and
such) and I use window.print() to print my form.
Here is the problem:
My form is 6 to 7 pages long.
But has expected It print fine on Google Chrome (All the section are on
separate pages) but In IE (latest version) some field and some sections
are "cut in half" on some pages.
I think the problem is how IE use margins and paddings.
I also checked for any parameter I could pass to window.print() on Google
thinking maybe it could help but did'nt find anything.
Can someone provide another way or another function I could use so my form
look the same on both browser when print?? Or maybe someone could point If
I made a mistake.
Here is my code:
HTML:
<div id="divCodeSecurite">
<h3 class="Titre">Codes de sécurité des ascenseurs</h3>
<span class="SHL MixteLeft" id="CodeSecuriteLeft">
<input type="radio" id="B442007" name="CodeSecurite"
value="B44-2007"/>
<label for="B442007">B44-2007</label>
<input type="radio" id="B442010" name="CodeSecurite"
value="B44-2010"/>
<label for="B442010">B44-2010</label>
<input type="radio" id="ASME1712007" name="CodeSecurite"
value="ASME 17.1-2007"/>
<label for="ASME1712007">ASME 17.1-2007</label>
<input type="radio" id="ASME1712010" name="CodeSecurite"
value="ASME 17.1-2010"/>
<label for="ASME1712010">ASME 17.1-2010</label>
</span>
<span class="SHR MixteRight" id="CodeSecuriteRight">
<label for="CodeSecuriteAutre" class="SHLabel">Autre:</label>
<input type="text" id="CodeSecuriteAutre"
name="CodeSecuriteAutre"/>
</span>
</br></br>
<span class="SHL">
<label for="VilleInstallation">Ville d'installation:</label>
<input type="text" id="VilleInstallation"
name="VilleInstallation"/>
</span>
</div>
</br>
<div id="divTypeControl">
<h3 class="Titre">Type de contôle</h3>
<span class="SHL">
<label class="SHLabel">Modèle:</label>
<input type="radio" id="JHD1000" name="JHD1000"
value="JHD-1000"/>
<label for="JHD1000">JHD-1000 (Avec automate)</label>
</span>
<span class="SHR">
<input type="radio" id="JHD2000" name="JHD2000"
value="JHD-2000"/>
<label for="JHD2000">JHD-2000 (Carte de communication
Canbus)</label>
</span>
</div>
<div class="Spacers divspacer" style="height:440px;"></div>
Notes: I put only a sample of my code. I have several time this lenght.
The <div class="Spacers divspacer" style="height:440px;"></div> is what I
used to try and put all the <div id=""> on one page each.
CSS:
<style rel="stylesheet" type="text/css">
.Border
{
border: black solid 2px;
}
.Titre
{
text-align:center;
background-color:black;
color:white;
border: solid black 2px;
}
.Spacers
{
display:none;
}
</style>
Notes: I remove the code that was not directly needed for the question if
I remove something that was needed please say so I will Edit and Add the
missing code.
FYI: dont look for .divspacer. It does not exist, it is use only in my
JQuery (see below).
JQUERY:
function ImprimerForm()
{
$("#divBgd").removeClass('Border');//This remove the border
$("#divValidationEnvois").css('display', 'none');//This hide
all the button so they dont print
$(".divspacer").removeClass('Spacers');//Make spacers visible
window.print();//Print form
$("#divBgd").addClass('Border');//Put everything back has it
was!!
$("#divValidationEnvois").css('display', 'block');
$(".divspacer").addClass('Spacers');
}
So Just to be clear:
Probelm: I can't get IE and Chrome to print my form the same way. Some
field are cut in two and some <div> are on two different pages.
Looking for: A way to make them print my form the same way on both browser
OR an error a made with the layout.
What I already did: Look for parameters for window.print() AND Tried
adding some SPACERS (see code above).
Thank you all for the help!