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

Compatibility View layout issues

1 Answer 84 Views

Button

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

Ahrensberg asked on 21 Feb 2011, 11:17 AM

without-cm.png

with-cm.png

Hi all,

I've encounted some layout issues at my page after setting IE8 to running in Compatibility View.

One issue is in using RadButton with an icon. I've created a small sample project which code is shown beneath, and layout difference is attached this thread.

Can anyone tell me why these difference occurs? And how to solve the issue...?

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

<style type="text/css">

.iconStyle

{

top: 4px !important;

left: 5px !important;

height: 32px !important;

width: 32px !important;

}

</style>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

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

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

</telerik:RadAjaxManager>

<div>

<telerik:RadButton runat="server" ID="RadButton1" Text="Go to basket" Height="40px" Width="200px" EnableBrowserButtonStyle="true">

<Icon PrimaryIconUrl="App_Themes/Default/Graphics/shopping_cart_lrg.png" PrimaryIconCssClass="iconStyle" />

</telerik:RadButton>

</div>

</form>

</body>

</html>

1 Answer, 1 is accepted

answered on 21 Feb 2011, 03:17 PM

Hi Ahrensberg,

This problem existed in some of the previous versions of the RadButton control, but has been fixed in the latest release. Could you please upgrade your application to use the latest version of our controls, and see if the issue is resolved?
The following CSS will resolve the issue without the need for updating:

<style type="text/css">

.RadButton input

{

height: 40px !important;

}

</style>

All the best,
Pero
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!