Bug in RadMenu in IE8

2 posts, 1 answers
  1. wnl
    wnl avatar
    106 posts
    Member since:
    Aug 2007

    Posted 07 Sep 2010 Link to this post

    Hi,
    I'm using RadMenu. I have to change opacity of whole page. So I wrote a code:

    protected void Page_Load(object sender, EventArgs e)
        {
            ClientScript.RegisterStartupScript(typeof(string), "DoDarker", "$('html').css('opacity', 0.7);", true);
        }

    and an aspx file:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
     
        <script src="jquery-1.4.2.min.js" type="text/javascript"></script>
    </head>
    <body style="background-color: Maroon;">
        <form id="form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
        <div>
            <telerik:RadMenu ID="RadMenu1" runat="server">
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 2">
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 3">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Root RadMenuItem2">
                        <Items>
                            <telerik:RadMenuItem runat="server" Text="Child RadMenuItem 1">
                            </telerik:RadMenuItem>
                        </Items>
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenu>
        </div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Button ID="Button1" runat="server" Text="Button" />
        </form>
    </body>
    </html>
    And now when I open that page Firefox, everything is ok. In IE8 there is an error - child items in menu are white. I attached screens:
    Firefox: 
    http://i51.tinypic.com/2it3tf.jpg
    IE8:
    http://i52.tinypic.com/6tfiif.jpg

    How to fix this?
  2.
  3. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 07 Sep 2010 Link to this post

    Hello Jaromin,

    Unfortunately this stems from a bug in Internet Explorer (all versions). Since opacity CSS3 property is not implemented up to and including IE8, jQuery uses filter: alpha() to make the element transparent. The bug in IE is that stacked filters that contain an element with position: relative produce very weird results like missing text or sometimes even fully transparent element that can drill down even through an iframe. I would advise against using filters at all or at least on elements that don't stack (instead of applying the filter on the whole page you can apply it on a div above the content) but if there's no other way - you can just disable the overlay in RadMenu (which takes care of overlaying select elements in IE6 and Flash objects in all IE browsers and is basically a hidden with filter: alpha() iframe) and the issue will most likely go away.

    All the best,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top