Different result in IE6 and FF

3 posts, 2 answers
  1. Jaime
    Jaime avatar
    17 posts
    Member since:
    Apr 2008

    Posted 21 Apr 2008 Link to this post

    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. Answer
    Sophy
    Admin
    Sophy avatar
    636 posts

    Posted 22 Apr 2008 Link to this post

    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
  3. Answer
    Jaime
    Jaime avatar
    17 posts
    Member since:
    Apr 2008

    Posted 22 Apr 2008 Link to this post

    Many thanks, that do the trick....you guys are awesome.
    Cheers.
Back to Top