asp.net ajax calendar extender (in updatepanel) causes wrapping

Question

Here's a simplified version of my page:

<asp:UpdatePanel runat="server" ID="dateUpdatePanel" RenderMode="Inline">
<ContentTemplate>

    <asp:Label runat="server" ID="lblDateFrom" Text="From:" />
    <asp:TextBox runat="server" ID="txtDateFrom" />
    <asp:ImageButton runat="server" ID="cmdDateFrom" ImageUrl="~/images/calendar.jpeg"  />
    <ajax:CalendarExtender runat="server" ID="calendarFrom" TargetControlID="txtDateFrom" 
        PopupButtonID="cmdDateFrom" Format="dd/MM/yyyy" />               

</ContentTemplate>
</asp:UpdatePanel>

<asp:Button runat="server" ID="cmdRunReport" Text="Run Report" OnClick="cmdRunReport_Click" />

The UpdatePanel is set to render inline so the "Run Report" button is displayed in line and to the right of the calendar input. However, when I click on the calendar image button (cmdDateFrom) the "Run Report" button moves and is rendered on the next line down!

Can any CSS gurus help?

Answer 1

Probably because the calendar is rendered as a div, which by default gets its own line. An option would be to use a standard calendar control within an absolutely position div. That would prevent it from forcing the wrapping, but you'll have to arrange the page properly so it doesn't cover any necessary controls.

Answer 2

<style type="text/css">
    ajax__calendar
        {
            display: inline;
    }
</style>

seems to fix it with IE6 and FF3