Opacity issue with ie (background is white)

[fred williams]

So I followed the instructions from this forum to remove the borders from the window. 
.rwCorner,
.rwTopResize,
.rwFooterCenter,
.rwTitebar
{
display: none !important;
}
.rwTitlebar
{
background-attachment:fixed;
background-position: 0 -6px !important;
}

In the I set the opacity property for the window to 90
<telerik:RadWindow ID="xxx" runat="server" NavigateUrl="xxx" Opacity="90" Behaviors="Close" Modal="true" Height="200px" Width="245px" OnClientClose="pBakc"/>
 

Everything works fine in firefox and Chrome. The window displays with no borders and it's background is see-through. In ie, the borders are gone, but the background is white.

What am I doing wrong? Why is the background white for ie?

Help please.

[Marin Bratanov]

Hello Fred,

The issue is an expected browser behavior, as IE does not support the Opacity property.The solution is using a wrapper and some CSS hacks. An example CSS rule would be:

opacity:.7; /* css standard */
filter:alpha(opacity=70); /* IE patch */

For more information see the following sites:
http://www.quirksmode.org/css/opacity.html
http://www.w3schools.com/Css/css_image_transparency.asp



Kind regards,
Marin
the Telerik team

[fred williams]

Hello,

Thanks for the reply. Would I place the above css in the style for the radwindow (ie. inside the <teleirk:RadWindow> tag using the style attribute)? Or should I use the "CssClass" property to assign the Rad Window a class and place the above css in my stylesheet? 

Thanks,
Fred

[Marin Bratanov]

Hi Fred,

RadWindow is a complex element and setting an inline style would not work. What you have used before is its Opacity property, not the CSS rule.
I would recommend using the CssClass attribute as it allows for more flexibility and you could define additional rules. Here is a small example based on your code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="TransparentWindow.aspx.cs" Inherits="Default2" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
    <style type="text/css">
        .rwCorner, .rwTopResize, .rwFooterCenter, .rwTitebar
        {
            display: none !important;
        }
        .opaque
        {
            opacity: 0.5;
            filter:alpha(opacity=50);
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <asp:ScriptManager runat="server" />
    <telerik:RadWindow ID="xxx" runat="server" Behaviors="Close, Move" Height="200px"
    Width="245px" VisibleOnPageLoad="true" CssClass="opaque" Modal="true"/>
</asp:Content>

Regards,
Marin
the Telerik team

[fred williams]

Hello,

This works, but it also makes all the elements inside of the window (buttons, textboxes etc) transparent as well. What I'd like to do is only have the background transparent and have the controls inside of it at normal (100%) opacity.

[Marin Bratanov]

Hi Fred,

In that case you have to use a transparent image for the background of the RadWindows. I have attached a sample image and the modified page for your convenience. If you find this background too transparent you can create your own with the desired opacity.

Regards,
Marin
the Telerik team