lightbox with javascript and css

[slawko000]

I was trying to create a lightbox, so that a form that I have to open in a lightbox. Bellow there is my javascript, html and css code. Everything is working fine. My only problem is that if I start maximizing or minimizing the explorer's window, the white content that includes the form does not keep the same fixed size that I gave at the beginning. I want it to keep the size that I gave it at the begining without changing size while minimizing or maximizing the window (i want it to be like the lightbox uses facebook when displays the photo). any ideas how to do this?\[code\]p><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://stackoverflow.com/questions/15720762/img/add.jpg"/></a></p> <div id="light" class="white_content"><table border="0"><td ><fieldset style="width:530px; padding-left:5px; background-color:white " ><h2><font color="#5D5D5D" size="2" face="caecilia-light', face="helvetica,arial,sans-serif" ></br> School</br> <input name="school_1" type="text" size="73" value="http://stackoverflow.com/questions/15720762/<?php echo $user_data_profile_education['school_1']; ?>"/> </br></br> Study</br> <input name="field_1" type="text" size="73" value="http://stackoverflow.com/questions/15720762/<?php echo $user_data_profile_education['field_1']; ?>"/> </br></br> Specialized </br> <input name="specialized_subject_1" type="text" size="73" value="http://stackoverflow.com/questions/15720762/<?php echo $user_data_profile_education['specialized_subject_1']; ?>"/> </br></br> Degree</br> <input name="degree_1" type="text" size="73" value="http://stackoverflow.com/questions/15720762/<?php echo $user_data_profile_education['degree_1']; ?>"/> </br></br> Grade</br> <input name="grade_1" type="text" size="73" value="http://stackoverflow.com/questions/15720762/<?php echo $user_data_profile_education['grade_1']; ?>"/> </h2></font> </fieldset> </td></table><a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"> </br><img src="http://stackoverflow.com/questions/15720762/img/done_editing.jpg"/> </a></div> <div id="fade" class="black_overlay"></div> \[/code\]and this is my CSS :\[code\] .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 220%; background-color: grey; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .white_content { display: none; position: absolute; top: 45%; left: 30%; width: 32%; height: 51%; padding: 30px; padding-left:50px; border: 5px solid green; background-color: white; z-index:1002; overflow: auto; }\[/code\]