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

[Solved] Different result in IE6 and FF

2 Answers 115 Views

Dock

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

Jaime asked on 22 Apr 2008, 12:34 AM

Hello everybody.
I have an aspx file using the RadDockLayout, RadDockZone and RadDock controls and they look very diferent in IE6 and FF.
How can I make they look equal?.
Here is the aspx code:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._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>Untitled Page</title> 
        
                <style type="text/css"> 
        
                    .style1 
        
                    { 
        
                        width: 100%; 
        
                    } 
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadDockLayout ID="RadDockLayout1" runat="server" StoreLayoutInViewState="True"> 
        
                        <table class="style1"> 
        
                            <tr> 
        
                                <td valign="top"> 
        
                                    <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="500px"> 
        
                                        <telerik:RadDock ID="RadDock1" runat="server" Width="300px"> 
        
                                            <ContentTemplate> 
        
                                                hello world 
        
                                            </ContentTemplate> 
        
                                        </telerik:RadDock> 
        
                                    </telerik:RadDockZone> 
        
                                </td> 
        
                                <td valign="top"> 
        
                                    <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="500px"> 
        
                                    </telerik:RadDockZone> 
        
                                </td> 
        
                            </tr> 
        
                        </table> 
        
                    </telerik:RadDockLayout> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

2 Answers, 1 is accepted

Accepted

answered on 22 Apr 2008, 11:47 AM

Hello Jaime,

The problem you experience is due to the fact that IE6 browser does not support min-width and min-height. In IE6 height is used for min-height. Setting MinHeight="500px" to the RadDockZone you actually set min-height 500px to the DOM element comprising the dock which is not applied in IE6. That is why, I suggest you set the height attribute to the div elements representing the corresponding zone only in IE6. I recommend also setting width and height 100% to the html,body and form elements as well as set table-layout:fixed to the table element containing the zones, e.g:

    
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head id="Head1" runat="server">  
        
                <title>Untitled Page</title> 
        
                <style type="text/css">  
        
                    html, body, form  
        
                    {  
        
                        height: 100%;  
        
                        width: 100%;  
        
                        margin: 0px;  
        
                        padding: 0px;  
        
                    }  
        
                    .style1    
        
                    {    
        
                        width: 100%;   
        
                        table-layout: fixed;   
        
                    }   
        
                    .raddockzone.RadDockZone_Default.rdVertical   
        
                    {  
        
                        _height: 500px;  
        
                    }      
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <asp:scriptmanager id="ScriptManager1" runat="server" /> 
        
                    <div id="div1">  
        
                        <telerik:raddocklayout id="RadDockLayout1" runat="server" storelayoutinviewstate="True">    
        
                        <table class="style1">      
        
                            <tr>    
        
                                <td valign="top">    
        
                                    <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="500px">    
        
                                        <telerik:RadDock ID="RadDock1" runat="server">    
        
                                            <ContentTemplate>    
        
                                                hello world    
        
                                            </ContentTemplate>    
        
                                        </telerik:RadDock>      
        
                                    </telerik:RadDockZone>    
        
                                </td>    
        
                                <td valign="top">    
        
                                    <telerik:RadDockZone ID="RadDockZone2" runat="server" MinHeight="500px">    
        
                                    </telerik:RadDockZone>    
        
                                </td>    
        
                            </tr>    
        
                        </table>    
        
                    </telerik:raddocklayout> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

You also do not need to set width to the RadDock as it is docked in a zone and takes 100% of the zone as the FitDocks property of the RadDockZone is true by default.

If you need further assistance, do contact us again.

Best regards,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

Accepted