IE8 Compatibility View Question

10 posts, 1 answers
  1. maduka
    maduka avatar
    3 posts
    Member since:
    Jul 2008

    Posted 20 Jul 2010 Link to this post

    Dear

    This html code

    <html xmlns="http://www.w3.org/1999/xhtml" height="100%">
    <head runat="server">
        <title>未命名頁面</title>
        <style type="text/css">  
        html, body, form  
        {  
            height: 100%;  
            margin: 0px;  
            padding: 0px;  
            overflow: hidden;  
        }  
        </style>  
    </head>
    <body scroll="no" height="100%">
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager" runat="server" />  
            <div id="ParentDivElement" style="height: 100%;">  
                <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%"  
                    Orientation="Horizontal" Skin="Outlook">  
                    <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150"  
                        Scrolling="Both">  
                    </telerik:RadPane>  
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />  
                    <telerik:RadPane ID="MainPane" runat="server" Scrolling="none" MinWidth="500">  
                        <telerik:RadSplitter ID="NestedSplitter" runat="server" Skin="Outlook" LiveResize="true">  
                            <telerik:RadPane ID="LeftPane" runat="server" Width="200" MinWidth="150" MaxWidth="400">  
                                <!-- Place the content of the pane here -->  
                            </telerik:RadPane>  
                            <telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />  
                            <telerik:RadPane ID="ContentPane" runat="server">  
                                <!-- Place the content of the pane here -->  
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>                            
                                <telerik:RadMenu ID="mBar" Runat="server" Skin="Office2007" Width="100%">
                                    <Items>
                                        <telerik:RadMenuItem runat="server" Text="Root RadMenuItem1">
                                        </telerik:RadMenuItem>
                                    </Items>
                                    <CollapseAnimation Duration="200" Type="OutQuint" />
                                </telerik:RadMenu>
             
            </td>
        </tr>
    </table>
                            </telerik:RadPane>  
                        </telerik:RadSplitter>  
                    </telerik:RadPane>  
                </telerik:RadSplitter>  
      
        </div>
        </div>
        </form>
    </body>
    </html>

    When I use IE8 to browse this page is normal
    But when I change IE8 to [Compatibility View]
    The RadMenu will disappear when I scrolling page and then mouse over it
    I need resize IE8 browser, RadMenu will show on page

    How to fix it?
    Thank you very much~>"<
  2. Answer
    Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 21 Jul 2010 Link to this post

    Hi maduka,

    I see from your code that you are aware of the CSS rule for elements sized in percentages and their parents. However, you have forgotten to set explicit height to the outermost wrapper DIV - please do so as shown below:

    <html xmlns="http://www.w3.org/1999/xhtml" height="100%">
    <head runat="server">
        <title>未命名頁面</title>
        <style type="text/css"
        html, body, form 
        
            height: 100%; 
            margin: 0px; 
            padding: 0px; 
            overflow: hidden; 
        
        </style
    </head>
    <body scroll="no" height="100%">
        <form id="form1" runat="server">
        <div style="height:100%">
            <asp:ScriptManager ID="ScriptManager" runat="server" /> 
            <div id="ParentDivElement" style="height: 100%;"
                <telerik:RadSplitter ID="MainSplitter" runat="server" Height="100%" Width="100%" VisibleDuringInit="false"
                    Orientation="Horizontal" Skin="Outlook"
                    <telerik:RadPane ID="TopPane" runat="server" Height="100" MinHeight="85" MaxHeight="150" 
                        Scrolling="Both"
                    </telerik:RadPane
                    <telerik:RadSplitBar ID="RadsplitbarTop" runat="server" CollapseMode="Forward" />


    I also recommend to set VisibleDuringInit="false" to hide the initial resize from the end user and to get a better result.

    I hope that my reply is helpful, let me know how it goes.

    Greetings,
    Svetlina
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. maduka
    maduka avatar
    3 posts
    Member since:
    Jul 2008

    Posted 21 Jul 2010 Link to this post

    Thanks to your reply
    I try add VisibleDuringInit property
    but when I browse with Compatibility View, or use IE6
    the RadMenu also disappear when I scrolling page and then mouse over it

    I use Telerik.Web.UI ver 2008.2.826.35
  5. Kiran
    Kiran avatar
    19 posts
    Member since:
    May 2009

    Posted 22 Jul 2010 Link to this post

    Hi there,

    I am facing the same issue with Radtabstrip, its working fine in normal ie8 view, but when i set compatibility view, radtabstrip just disappear

    I am using  ASP.NET AJAX Q3 2009

    kiran
  6. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 27 Jul 2010 Link to this post

    Hi,

    Could you please make sure that you have DOCTYPE XHTML 1.0 or 1.1 set on the page where the problem occurs?

    For example:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


     If this is not the case, could you please provide a sample page and / or a screenshot that demonstrates the exact problem?

    All the best,
    Dobromir
    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
  7. Kiran
    Kiran avatar
    19 posts
    Member since:
    May 2009

    Posted 27 Jul 2010 Link to this post

    Hi Dobromir,

    Yes I have the same doc type, but still not working,  actually i should not say tabstrip disappear, here is the explaination, 

    My page was orignally created in vs 2005 .net 2.5,  then we converted to 2008 .net 3.5, as we changed the doctype as well, 

    Currently i have IE 8 on my machine, everything is working fine in normal mode, but when i select compatibility view, I wasnt not able to see radtabstip, then on IE, I searched for my tabs text, and i found it, they were align right side under the screen,

    then to see the html code, i had gone through this
     IE8 > Tools > Developer Tools > 

    I could see as below

    <div class="RadTabStrip RadTabStrip_Default RadTabStripTop_Default" id="EmpEditTabbed_EmpTabbed" style="width: 923px; overflow: hidden;">
    <div class="rtsLevel rtsLevel1">
    <ul class="rtsUL rtsScroll">

    here is the rtsScroll css
    .RatTabStrip . rtsScroll
    {
        width: 10000px;
       white-space: nowrap
    }

    In the tools when i removed width:10000px from css, tabs gets left align and i could see tabs, 

    FYI, I am using doctype and meta as following

    <!

     

    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">

     


    <

     

    meta content="Microsoft Visual Studio.NET 7.0" name="GENERATOR" />

     

     

    <meta content="Visual Basic 7.0" name="CODE_LANGUAGE" />

     

     

    <meta content="JavaScript" name="vs_defaultClientScript" />

     

     

    <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema" />

     





    Is there anyway to remove 10000px or any other way to resolved this issue ?

    ---
    Kiran Pandit






     
  8. Kiran
    Kiran avatar
    19 posts
    Member since:
    May 2009

    Posted 27 Jul 2010 Link to this post

    Hi there,

    I found that, was a problem in my page designing,

    Now it working absolutly fine

    Thanks
    Kiran Pandit
  9. Girish
    Girish avatar
    1 posts
    Member since:
    Nov 2011

    Posted 10 Nov 2011 Link to this post

    buddy try putting you <body> tag with scroll = true

    <

     

    body scroll="yes">

    let me know if it doesnt work.

    Girish Varma
    Tech lead

     

  10. Anshul
    Anshul avatar
    8 posts
    Member since:
    Mar 2013

    Posted 23 Apr 2014 Link to this post

    Hi there,

    I am facing the issue with Radtabstrip, its working fine in normal ie8 view, but when i set compatibility off in IE 11, radtabstrip node navigation not working.
    i am using product version is 2013.3.1217.40
  11. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 23 Apr 2014 in reply to Anshul Link to this post

    Hi Anshul,

    Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample code snippet which works fine at my end. Please provide a sample code snippet if it doesn't help.

    ASPX:
    <telerik:RadTabStrip ID="radtabNodeNavigation" runat="server">
        <Tabs>
            <telerik:RadTab Text="Tab1" NavigateUrl="Default.aspx">
            </telerik:RadTab>
            <telerik:RadTab Text="Tab2" NavigateUrl="Default2.aspx">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017