DIV inside TD to make it appear correctly

Question

Hi,

I have a <table> generated from code-behind and now facing a problem. In one of the TD i need to have a DIV that is setup with JQuery so that when i click a link the DIV slideToggles. Now i need the TD belonging to that TR not to expand the TR.

To solve this i have used an old trick that is to place the JQuery DIV inside another surrounding DIV with height 1px and make the TR not expanding with the heigth of the DIV that slides out.

In IE the sliding DIV is partially under the table and in Firefox the DIV appears over the table but it's trasparent, the text from the data in the table shows thru.

I have tried to alter the Z-index in various ways but it's no good.

Anyone that has an idea or alternatively solution that has worked for them.

HtmlGenericControl containerDiv = new HtmlGenericControl("div");
containerDiv.ID = "containerDiv";
containerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.Width, "100%");
containerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.Height, "1px");
containerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.ZIndex, "999");
HtmlGenericControl innerDiv = new HtmlGenericControl("div");
innerDiv.ID = System.Guid.NewGuid().ToString() + "_annualDiv";
inner.Style.Add(System.Web.UI.HtmlTextWriterStyle.Width, "100%");
innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.Height, "300px");
innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.ZIndex, "1000");
innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.BorderStyle, "solid");
innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.BorderColor, "Black");
innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.BorderWidth, "1px");
innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.BackgroundColor, "white");
innerDiv.InnerHtml = "Here is a list of links coming later";
conDiv.Controls.Add(innerDiv);

Answer 1

Note: Answering to close this out

Add a position: absolute style to the innerDiv element, like this:

innerDiv.Style.Add(System.Web.UI.HtmlTextWriterStyle.Position, "absolute");