Home/ Questions/Q 6374961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T01:33:12+00:00

I’m trying to debug a problem with a javascript div that correctly expands over

  • 0

I’m trying to debug a problem with a javascript div that correctly expands over other content in most cases, but expands under the content in one scenario. The problem is, I don’t really know where to start in debugging this.

By way of background, the div is supposed to expand over a third party grid control in ASP.NET.

In Firefox 5 or Chrome 13, browsing the site on either the deployed dev server or running it locally from Visual Studio, the div expands properly. Using IE8 running the site locally, the effect will expand properly as well. However, using IE8 on the deployed site shows the div expanding under the grid control.

This suggests to me that the problem is a difference between my laptop and the dev server. From there I’m lost on how to isolate the problem and rectify it.

Here is the code I’m using in 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 associated 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 that triggers the expanding/collapsing:

function RunColumnEffect() {
    if (!($('#ColumnEffect').is(":visible"))) 
    {
        $("#ColumnEffect").show('blind', 200);
    }
    else 
    {
        $("#ColumnEffect").hide('blind', 200);
    }
};
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem must be that IE8 is displaying the “deployed site” in a different “Browser Mode”.

    Hit F12 to bring up the Developer Tools to see which mode is being used.

    Adding this inside the <head> will solve the problem:

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    • 0