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

IE8 Compatibility View Question

9 Answers 317 Views

Splitter

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

maduka asked on 20 Jul 2010, 05:14 AM

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

</telerik:RadPane>

<telerik:RadSplitBar ID="VerticalSplitBar" runat="server" CollapseMode="Forward" />

<telerik:RadPane ID="ContentPane" runat="server">

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

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

9 Answers, 1 is accepted

Accepted

answered on 21 Jul 2010, 10:35 AM

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

answered on 27 Jul 2010, 08:52 AM

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

answered on 27 Jul 2010, 02:56 PM

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

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

---
Kiran Pandit