IE issue

[mark110384]

Hey guys, I'm a bit stuck on this problem. Essentially what I wan't to do is display an image cetered in the middle of the browser that stays in the same position when the user scrolls. It works fine in FF but in IE there are a number of issues.

 

1. When the page is first loaded the there is a huge space at the bottom of the page (pressumably because this is where the hidden image is).

 

2. The blue background div loads at the top and the image loads at the bottom of the page (the image is supposed to be centered in the div).

 

3. The image wont stay fixed when scrolled.

 

Here's my css

 

<style>
#image_holder 
{
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
visibility: hidden;

}
.bg_image_tint 
{ 
position: fixed; 
filter:alpha(opacity=55); 
opacity:.55; 
width: 100%; 
height: 100%; 
min-height: 100%; 
margin: 0px; 
background-color:#63A5E1;

}



.holder 
{ 
position: fixed; 

width: 100%; 
height: 100%; 
min-height: 100%; 
margin: 0px; 


}


.centered_image_table 
{ 

width: 30%; 
height: 200;
top: 10%; 
left: 20%;
background-color:#ffffff;

}


</style>

 

And the HTML and PHP

 

<div id="image_holder"> 
  <table class="bg_image_tint">
    <tr>
      <td></td>
    </tr>
  </table>
  <table class="holder">
    <tr> 
      <td align="center"> <table border="0" width="100%">
          <tr> 
            <td align="center"> <table border="0" class="centered_image_table" bgcolor="#FFFFFF">
                <tr> 
                  <td> <img src="../images/<? echo "$large_image_src"; ?>"/> </td>
                </tr>
                <tr>
                  <td align="right"><a href="javascript://" onMouseUp= "close_image()">Close</a> 
                    or Esc Key</td>
                </tr>
              </table></td>
          </tr>
        </table></td>
    </tr>
  </table></td></tr>
  </table> </div>

 

 

Please can someone help me with these issues.

 

[departedmind]

I am not sure but it maybe due to extra </td></tr></table> tags at the end