asp.net ajax collapsible panel in ie8 problem

Question

Anyone try this simple bit of code in an ie8 browswer and try refreshing the page,

in ie8 you will get an error around getelementbyid on refresh.

When i run it it complains of not being able to find control with id of 'ctl00_main_dd'

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server"     
     ImageControlID="Image2" CollapsedImage="~/App_Themes/IMStandard/icons/uparrow.png"
    ExpandedImage="~/App_Themes/IMStandard/icons/downarrow.png"
     CollapseControlID="dd" ExpandControlID="dd"
     TargetControlID="pnlQuickKeywordSearch"
     SuppressPostBack="true">
</cc1:CollapsiblePanelExtender>
 <asp:Panel ID="dd" runat="server">
    <h3 class="loginHeader">
        <asp:Image ID="Image2" runat="server" />
        &nbsp;&nbsp;Quick Keyword search&nbsp;<asp:Image ID="HelpIconImage" runat="server"
            Width="16px" Height="16px" ImageUrl="~/App_Themes/IMStandard/icons/help.png" /></h3>
</asp:Panel>
 <asp:Panel ID="pnlQuickKeywordSearch" Style="float: left; border: double 3px #C9DF86;"
    runat="server" >
    <div style="clear: both; padding: 5px;">
    </div></asp:Panel>

Anybody know why this is happening? is it a bug in ie8 or am i missing something?

By the way, i am using masterpages, but i dont think that has anything to do with it.

Thanks

Answer 1

Hi there Stuart,

This example works for me in my IE8 running on Windows 7. The id 'ctl00_main_dd' is typically the generated clientside ID (VS2010 will enable us to specify client side ID's.)

Can you use a div instead of the asp:panel for your expand/collapse control ?

<div ID="dd">
    <h3 class="loginHeader">
        <asp:Image ID="Image2" runat="server" />
          Quick Keyword search <asp:Image ID="HelpIconImage" runat="server"
            Width="16px" Height="16px" ImageUrl="~/App_Themes/IMStandard/icons/help.png" /></h3>
</div>

The collapsible panel extender should then be able to find the static 'dd' client ID.

Added 02.06: No good guesses to why it happens in IE8 only

I would check =>

1) Correct doctype in masterpage

DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”

2) Tick the compatibility view button in IE8 if present

3) Ensure all VS, Framework and Toolkit are latest versions (SP1)

Answer 2

Thanks, i can't test it right now, i will try when i get home..

It must be the only thing i havn't tried.

In all other browsers the page works without any problems, but like i said, in ie8 it complains of not finding the element? weird?

Answer 3

We just had a weird scenario where there was a tag inside the collapsed panel with style="float:right;", and removing div tag fixed the issue. Hopefully that helps someone else.