Menu under custom control in Firefox

[James]

I am using a radmenu on the same page as a custom control.  The custom control shows a PDF reader in the web page.
In IE 6 and 7, the menu choices will overlay the custom control when you roll the mouse over them as expected.  In Firefox 3.0, the radmenu choices open but they are underneath the custom control.
Here is what the HTML looks like:

    <asp:Panel ID="pnlShowPDFDocument" runat="server" CssClass="NonCatalogData">
        <telerik:RadMenu ID="RadMenu1" runat="server" Width="1000px" >
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        <Items>
            <telerik:RadMenuItem runat="server" Text="Shopping Activities" meta:resourcekey="rmiShoppingActivtiesResource">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Favorites" Value="Favorites" meta:resourcekey="rmiFavoritesResource" />
                    <telerik:RadMenuItem runat="server" Text="View Cart" Value="ViewCart" meta:resourcekey="rmiViewCartResource" />
                    <telerik:RadMenuItem runat="server" Text="Crash Catalog" Value="CrashCatalog" meta:resourcekey="rmiCrashCatalogResource" />
                    <telerik:RadMenuItem runat="server" Text="PBE Catalog" Value="PBECatalog" meta:resourcekey="rmiPBECatalogResource" />
                    <telerik:RadMenuItem runat="server" Text="Quick Order Entry" Value="QuickOrderEntry" meta:resourcekey="rmiQuickOrderEntryResource" />
                    <telerik:RadMenuItem runat="server" Text="EMS Upload" Value="EMSUpload" meta:resourcekey="rmiEMSUploadResource" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Inquiries" meta:resourcekey="rmiInquiriesResource">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Open Orders" Value="OpenOrders" meta:resourcekey="rmiOpenOrdersResource" />
                    <telerik:RadMenuItem runat="server" Text="Order History" Value="OrderHistory" meta:resourcekey="rmiOrderHistoryResource" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Site Access" meta:resourcekey="rmiSiteAccessResource">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Log Out" Value="LogOut" meta:resourcekey="rmiLogOutResource" />
                    <telerik:RadMenuItem runat="server" Text="Select Customer" Value="SelectCustomer" meta:resourcekey="rmiSelectCustomerResource" />
                    <telerik:RadMenuItem runat="server" Text="Change Password" Value="ChangePassword" meta:resourcekey="rmiChangePasswordResource" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Help" meta:resourcekey="rmiHelpResource">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="User Instructions" Value="UserInstructions" meta:resourcekey="rmiUserInstructionsResource" />
                    <telerik:RadMenuItem runat="server" Text="New Features" Value="NewFeatures" meta:resourcekey="rmiNewFeaturesResource" />
                    <telerik:RadMenuItem runat="server" Text="Contact Us" Value="ContactUs" meta:resourcekey="rmiContactUsResource" />
                    <telerik:RadMenuItem runat="server" Text="Warranty Info" Value="WarrantyInfo" meta:resourcekey="rmiWarrantyInfoResource" />
                    <telerik:RadMenuItem runat="server" Text="Magnuson-Moss Warranty Act" Value="MagMossWarrantyAct" meta:resourcekey="rmiMagMossWarrantyActResource" />
                    <telerik:RadMenuItem runat="server" Text="Keyless" Value="Keyless" PostBack="false" NavigateUrl="javascript:GoToKeyless()" meta:resourcekey="rmiKeylessResource" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Catalogs" meta:resourcekey="rmiCatalogsResource">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Crash Catalog" Value="CrashCatalog" meta:resourcekey="rmiCrashCatalogResource" />
                    <telerik:RadMenuItem runat="server" Text="PBE Catalog" Value="PBECatalog" meta:resourcekey="rmiPBECatalogResource" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server" Text="Specials" meta:resourcekey="rmiSpecialsResource">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="PBE Monthly Specials" Value="PBEMonthlySpecials" meta:resourcekey="rmiPBEMonthlySpecialsResource" />
                </Items>
            </telerik:RadMenuItem>
        </Items>
        </telerik:RadMenu>
        <br />
        <cc1:ShowPdf ID="ShowPdf1" runat="server" FilePath="~/Documents/UserInstructions.pdf" BorderStyle="Inset" BorderWidth="2px"
            Height="600px" Width="990px" />
    </asp:Panel>

Thanks in advance for any suggestions that will resolve this issue.

[Paul]

Hi James,

You can enable the iframe overlay for all browsers by pasting the following JavaScript block after your RadMenu declaration:

<script type="text/javascript">
Telerik.Web.UI.Overlay.IsSupported = function ()
{
  //By default overlay is enabled in IE only
  //return $telerik.isIE;
  return true;
}
</script>

We will not enable by default the iframe overlay in all browsers as it may have side effects. I tested the aforementioned script block and RadMenu worked as expected in FireFox. In Chrome the menu went behind the pdf iframe. However I think that in Chrome no html element can overlay the pdf iframe - I tried this without success:

<iframe style="border:1px solid red;position:absolute;top:100px;z-index:1" src="javascript:void(0)"></iframe>
<iframe src="my.pdf" style="position:absolute;z-index:1"></iframe>

It seems the pdf plugin is rendered outside of the html document and cannot be overlain by html elements.

In addition, please review this article for possible solutions on the matter.

Kind regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[James]

Paul,
Great response!  I like having a solution provided along with an explanation, and the link was very informative.

Your solution gives the desired behavior in Firefox, although it has a weird flicker of my header image that appears above the sample code, but it works!

Thanks!