Hover not working on IE6 CSS

Hello once again

After my last 2 question I finally got the feature working, but after all that I have just tested on IE 6 and it doesn't work!

I am trying to create a photo gallery the when the thumbnail is hovered on a bigger picture is displayed.  Now I have read about the hover not working in IE6 but I have no idea how to fix it.

My code is as follows in C#, ASP.net and CSS.


C#----------------------

    protected void Page_Load(object sender, EventArgs e)
    {
        string html = "";
        char indx = 'a';
        html = "<ul>";

        foreach (FileInfo fi in new DirectoryInfo(Server.MapPath("Images/fullsize")).GetFiles())
        {
            if (!fi.Name.StartsWith("thumb_") && fi.Extension == ".jpg")
            {
                html += "<li>" +
                    "<a class=\"gallery\" style=\"background-image:url(Images/fullsize/thumb_" + fi.Name + ");\"" +
                    " href=\"#nogo\"> <span> <img src=\"Images/fullsize/" + fi.Name +
                    "\" alt=\"APIC\"/> </span> </a> </li>";

                indx++;
            }
        }
            html += "</ul>";
            imged.Text = html;      
    }  
--------------------------------------------


ASP.net--------------------------------------
<%@ Page language="C#" codefile="~/ImageLoad.aspx.cs" autoeventwireup="true" masterpagefile="~/MasterPage.master" inherits="ImageLoad"%>

<asp:content id="myimages" runat="server" contentplaceholderid="MasterPageContent">

<div class="myPics">

    <div id="imageContainer">            
        <asp:literal runat="server" id="imged" />


    </div>
</div>
----------------------------------------------------

CSS-----------------------------------------------

#imageContainer
{
      position:absolute;
      top:75px;
      width:770px;
      height:200px;
      margin:20px auto 0 auto;
      border:1px solid #000;
      left:75px;
}

#imageContainer ul
{

      padding:0;
      margin:0px;
      list-style-type:none;
      float:right;
}

#imageContainer a.gallery span
{
      position:absolute;
      width:1px;
      height:1px;
      top:5px;
      left:5px;
      overflow:hidden;
      background:#000;
}



#imageContainer a.gallery, #imageContainer a.gallery:visited
{
      display:block;
      color:#000;
      text-decoration:none;
      border:1px solid #000;
      margin:1px 2px 1px 2px;
      text-align:left;
      cursor:default;
      background-repeat:no-repeat;
      height:80px;
      width:80px;            
}

#imageContainer ul
{
      width:198px;
      height:386px;
}

#imageContainer li
{
      float:left;
}

#imageContainer ul
{
      margin:5px;
      float:right;
}

#imageContainer a.gallery:hover
{
      border:1px solid #000;
}

#imageContainer a.gallery:hover span
{
      position:absolute;
      width:500px;
      height:333px;
      top:-50px;
      left:-10px;
      color:#000;
      background:#000;      
      
}


#imageContainer a.gallery:hover img
{
      border:1px solid #fff;
      float:left;
      margin-right:5px;
}

.galleryBtn
{
      position:absolute;
      top:10px;
      left:140px;
      color:White;
      background-color:Black;
      font-size:large;
      font-family:Arial Black;
}
-----------------------------------------------------------
</asp:content>



Start Free Trial