Currently, I am facing an issue with a JavaScript div that expands correctly over other content in most situations but goes under the content in one specific scenario. I am unsure about where to begin debugging this problem.
To provide some context, the div is intended to expand over a third-party grid control in ASP.NET.
When browsing the site on Firefox 5 or Chrome 13, either on the deployed development server or locally from Visual Studio, the div expands as expected. Even when using IE8 locally, the effect works properly. However, upon accessing the deployed site using IE8, the div seems to expand under the grid control.
This inconsistency indicates that there might be a difference between my laptop and the development server. At this point, I am uncertain how to identify and resolve the issue.
Below is the code snippet used on the page:
<div class="ColumnDiv">
<span>
<asp:TextBox ID="ColumnTextBox" runat="server" CssClass="textbox">Show Columns</asp:TextBox>
<img id="ColumnArrow" src="<%= Page.ResolveUrl("~")%>images/DropDownArrow.jpg" style="margin-left: -22px; margin-bottom: -5px" />
<asp:label id="RedAsterisk" style="color:Red; font-weight:bold;" runat="server">*</asp:label>
</span>
<div id="ColumnEffect" class="ui-widget-content" style="height: 145px !important;">
<asp:CheckBoxList ID="ColumnChecks" runat="server">
<asp:ListItem Text="Select All" Value="Select All" />
<!-- Other list items -->
</asp:CheckBoxList>
</div>
</div>
<div>(Control resides here</div>
Here is the corresponding CSS:
#ColumnEffect
{
width: 249px;
height: 200px;
padding: 0.4em;
left:-1px;
top:20px;
position: absolute;
overflow: auto;
font-family:Calibri, Verdana, Tahoma;
font-size:10pt;
color:Black;
font-weight:normal;
text-decoration:none;
z-index:1;
}
And the jQuery script responsible for triggering the expanding/collapsing state:
function RunColumnEffect() {
if (!($('#ColumnEffect').is(":visible")))
{
$("#ColumnEffect").show('blind', 200);
}
else
{
$("#ColumnEffect").hide('blind', 200);
}
};