Works Great in Chrome & FF but not in IE - Help a rookie

Works Great in Chrome & FF but not in IE - Help a rookie

Hi All,
I am new to JQuery and this forum and have been scouring this form for an answer to a problem I have been working on for a couple of days.

I am working on a simple light box within an aspx.user control using a datalist control. 

The code works great in both Chrome & FF but when I click an image IE just shows the loading .gif and hangs without showing the image.
From what I can tell IE loads the div containing the image but adds the display: none attribute. like below.

<div id="lightbox" style="display: none;" jQuery1278360622181="5">

both Chrome & fire fox add display: block instead.

Here is my code, & I thank you in advance for you help. By the way I am really enjoying what JQuery can add to a website.

CSS-----------------------------
#overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: black url(../App_themes/spinner.gif) no-repeat scroll center center;
}

#lightbox
{
    position: absolute;
 }


Markup_________________________________________

<asp:DataList ID="DataList1" runat="server" 
RepeatColumns="3" 
Width="100%"  
CellSpacing="0" 
   RepeatDirection="Horizontal"
CellPadding="0"
EnableTheming="False"
RepeatLayout="Table"
ForeColor="#BD111E" 
Font-Size="X-Large" 
Font-Names="Arial" 
Font-Bold="True" CaptionAlign="Top" >

<ItemStyle HorizontalAlign="Center" VerticalAlign="Bottom" Height="170px"></ItemStyle>

<SeparatorStyle Wrap="False" BackColor="#FF3300" Height="30px" Width="100%"></SeparatorStyle>

<HeaderStyle Height="25px"></HeaderStyle>


<ItemTemplate>
<div id="Gallery_Template_Container">             
                   <img  class="lightbox" width="150" height="150" src='<%#DataBinder.Eval(Container.DataItem, "Image_URL")%>' alt='<%#DataBinder.Eval(Container.DataItem, "Image_URL")%>' />
       </div>

    </ItemTemplate>
    
</asp:DataList>

Script---------------------------------------------------------

$(document).ready(function () {
    $('img.lightbox').click(function (e) {
        $('body').css('overflow-y', 'hidden'); // hide scrollbars!

        $('<div id="overlay"></div>')
      .css('top', $(document).scrollTop())
      .css('opacity', '0')
      .animate({ 'opacity': '0.5' }, 'slow')
      .appendTo('body');

        $('<div id="lightbox"></div>')
      .hide()
      .appendTo('body');

            $('<img id="pup"/>')
      .attr('src', $(this).attr('src'))
      .load(function () {
          positionLightboxImage();         
      })
      .click(function () {
          removeLightbox();
      })
      .appendTo('#lightbox');
        return false;;
    });
});

function positionLightboxImage() {
    var top = ($(window).height() - $('#lightbox').height()) / 2;
    var left = ($(window).width() - $('#lightbox').width()) / 2;
//      console.log("The calculated position is:");
//      console.log(top,left);
    $('#lightbox')   
    .css({       
        'top': top + $(document).scrollTop(),
        'left': left
    })
      .fadeIn();

        }
//      console.log('A jQuery selection:');
//      console.log($('#lightbox'));

function removeLightbox() {
    $('#overlay, #lightbox')
    .fadeOut('slow', function () {
        $(this).remove();
        $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
}

Thanks again,
Gehres Weed