This is a migrated thread and some comments may be shown as answers.

[Solved] Bug in RadMenu in IE8

1 Answer 95 Views

This is a migrated thread and some comments may be shown as answers.

wnl asked on 07 Sep 2010, 08:39 AM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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?

1 Answer, 1 is accepted

Accepted

answered on 07 Sep 2010, 09:14 AM

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