Hi,
I'm using RadMenu. I have to change opacity of whole page. So I wrote a code:
and an aspx file:
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?
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>Firefox:
http://i51.tinypic.com/2it3tf.jpg
IE8:
http://i52.tinypic.com/6tfiif.jpg
How to fix this?
1 Answer, 1 is accepted
0
Accepted
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
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