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

[Solved] Window background color differs in IE and FF

2 Answers 143 Views

Window

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

Yeroon asked on 16 Dec 2009, 12:55 PM

telerik1.jpg

telerik2.jpg

Hello,

When I open a Window with a skin applied, the backgroundcolor is different between IE and FF. Tested with IE7, 8 and FF3.

IE will open te window with white background and FF with black (see screenshots attached). Any idea's why?

Reproduce by:

- Start a new Telerik WebApplication through the template version 2009 Q3 SP1 .Net 3.5 (first 2009 Q3 release had same problem)
- Set Skin in dialog to Black

- Open default.aspx and paste below code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %> 
        
            <!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>  
        
                <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" /> 
        
                <telerik:RadScriptBlock ID="rsblclient" runat="server">  
        
                    <script type="text/javascript">  
        
                        function openRequest() {  
        
                            var oWnd = $find("<%=RadWindow1.ClientID%>");  
        
                            oWnd.setUrl('Webform1.aspx');  
        
                            oWnd.show();  
        
                        }  
        
            </script> 
        
            </telerik:RadScriptBlock> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">  
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="Black">  
        
                </telerik:RadSkinManager> 
        
                <div> 
        
                    <asp:Button ID="btnOpen" runat="server" Text="Open window" OnClientClick="openRequest(); return false;" /> 
        
                    <telerik:RadWindow ID="RadWindow1" runat="server" Modal="true" NavigateUrl="WebForm1.aspx">  
        
                    </telerik:RadWindow> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

- Add new page called: Webform1.aspx
- Put some text on the Webform1.aspx page

- Run project

Attachment 1 is result from FF. Attachment 2 from IE

2 Answers, 1 is accepted

Accepted

answered on 16 Dec 2009, 01:32 PM

Hello Yeroon,

The parent element of the iframe rendered by RadWindow is a table cell with black (not black, actually, but #080808) background for that particular skin. On the other hand, in IE and FF the <iframe /> and document's background color is supported differently. The difference is that the background of a web-page that does not have any CSS background settings applied is transparent in FF, while in IE it is white, and what you see is actually the black background of the parent element of <iframe />. Unfortunately, the only fix to make things similar in both browsers is to set black (or any color you like) background to the <body /> or <html /> of the page that you load in RadWindow.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.