Lightbox in Internet Explorer 9

[KeredDrahcir]

I've created a lightbox which appears when a user clicks on a link to edit some options. It works in Firefox and Safari but as usualy doesn't work in IE. I'm using version 9.

In the head I've defined the following:

    <script type="text/javascript" language="javascript">
      /* Superior Web Systems */
      function displayHideBox(boxNumber)
      {
        if(document.getElementById("LightBox"+boxNumber).style.display=="none")
        {
          document.getElementById("LightBox"+boxNumber).style.display="block";
          document.getElementById("grayBG").style.display="block";
        }
        else
        {
          document.getElementById("LightBox"+boxNumber).style.display="none";
          document.getElementById("grayBG").style.display="none";
        }
      }
    </script>
    <style>
      .grayBox{
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index:1001;
        -moz-opacity: 0.8;
        opacity:.80;
        filter: alpha(opacity=80);
      }
      .box_content {
        position: fixed;
        top: 25%;
        left: 14%;
        right: 14%;
        width: 72%;
        padding: 16px;
        z-index:1002;
        overflow: auto;
      }
    </style>

To open the lightbox they use this lienk:

<a href="#" onclick="displayHideBox('[I]number[/I]'); return false;">[I]link[/I]</a>

The box looks like this:

                  <div id="LightBox[I]number[/I]" class="box_content" style="display: none; background-color: #ffffff; width: 780px; overflow: auto; height: 400px;">
	                <table cellpadding="3" cellspacing="0" border="0" width="100%">
	                  <tr align="left">
	                    <td colspan="2" style="padding: 10px;">
	                      <div onclick="displayHideBox('[I]number[/I]'); return false;" style="cursor:pointer;" align="right">X</div>
                              [I]box content[/I] 
	                    </td>
	                  </tr>
	                </table>
	              </div>

Can anyone help me?

[JKing]

Are there any javascript errors?

[KeredDrahcir]

No Javascript errors it just seems to display it inline with the page while a lightbox is supposed to sit on top.

Yesterday that's what happened, today the page expands like yesterday and the grey box for making it look opaque appears but the div it sit on top doesn't.

[KeredDrahcir]

Not quite sure what the problem was. Tried to solve a layout issue between IE and Firefox and decided to check it validated. When it didn't I fixed the validation errors and now it works.