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

[Solved] Fieldset padding in IE8, decorated with FormDecorator

3 Answers 137 Views

FormDecorator

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

Sean asked on 13 Sep 2011, 11:28 PM

ie8-vs-Chrome.png

Hi guys,

I know IE8's fieldsets are pretty notorious, and I have been working through some other visual issues with IE8, but this one has me a bit stumped. I think that any fixes I am trying to apply to the fieldset class might be getting quashed by FormDecorator. Not wanting to fight the battle from two ends at once, I thought it might be prudent to ask you guys real quick.

So, check it out. This dialog window renders properly under all webkit browsers, and under IE9, but under IE8 the fieldset margin/padding/border seems to have disappeared and the fieldset is being rendered inline instead of block?

<%@ Page Language="C#" EnableViewState="False" AutoEventWireup="True" CodeBehind="DashboardGlobalSettings.aspx.cs" Inherits="CableSolve.Web.Dashboard.Dialog.Windows.DashboardGlobalSettings" %>

<!DOCTYPE html>

<html lang="en">

<head runat="server">

<title></title>

</head>

<body onclick='OnClientMouseClick("body")' >

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

<link rel="stylesheet" type="text/css" href="../../../Content/Dashboard/DashboardGlobalSettings.css" />

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

<CompositeScript>

<Scripts>

<asp:ScriptReference Path="~/Scripts/Dashboard/DashboardGlobalSettings.js" />

</Scripts>

</CompositeScript>

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" Runat="server" DecoratedControls="All" Skin="Web20" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CheckBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadListBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadButton1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" />

<telerik:AjaxUpdatedControl ControlID="RadTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox4">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" Runat="server">

<script type="text/javascript">

var radListBox1ID = "<%= RadListBox1.ClientID %>";

var radTextBox1ID = "<%= RadTextBox1.ClientID %>";

var radButton1ID = "<%= RadButton1.ClientID %>";

var radNumericTextBox1ID = "<%= RadNumericTextBox1.ClientID %>";

var radNumericTextBox2ID = "<%= RadNumericTextBox2.ClientID %>";

var checkBox1ID = "<%= CheckBox1.ClientID %>";

var checkBox4ID = "<%= CheckBox4.ClientID %>";

var ajaxManagerID = "<%= RadAjaxManager1.ClientID %>";

</script>

</telerik:RadCodeBlock>

<fieldset id="RefreshProperties">

<legend>Refresh Settings</legend>

<div id="RefreshArea">

<div id="RefreshLeftSide">

Auto-Refresh Enabled:

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox1_CheckedChanged" />

</div>

<div id="RefreshRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server" Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False" LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<fieldset id="TabProperties">

<legend>Tab Settings</legend>

<div>

<div id="TabLeftSide">

<telerik:RadListBox ID="RadListBox1" Runat="server" AllowDelete="True" AllowReorder="True" EnableDragAndDrop="True" Skin="Web20" Height="95px" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" Width="150px" OnClientLoad="OnClientLoad"/>

</div>

<div id="TabRightSide" onclick='OnClientMouseClick("notbody")'>

<telerik:RadTextBox ID="RadTextBox1" Runat="server" EmptyMessage="Enter tab name" Skin="Web20" Width="150px" />

<div id="TabButton">

<telerik:RadButton ID="RadButton1" Runat="server" Skin="Web20" Text="Add Tab" OnClientClicked="OnButtonClicked" AutoPostBack="False">

</telerik:RadButton>

</div>

</fieldset>

<fieldset id="CycleProperties">

<legend>Tab Cycle Settings</legend>

<div id="CycleArea">

<div id="CycleLeftSide">

Auto-Cycle Enabled:

<asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" OnCheckedChanged="CheckBox4_CheckedChanged" />

</div>

<div id="CycleRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server" Label="Auto-Cycle Interval (Minutes):" MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False" LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<div id="BottomButton">

<telerik:RadButton ID="RadButton2" Runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" OnClick="RadButton2_Click" />

</div>

</form>

</body>

</html>

body

{

font-size: 12px;

font-family: "segoe ui",arial,sans-serif;

overflow: hidden;

}

.LabelEnabled

{

color: Black !important;

}

.LabelDisabled

{

color: Gray !important;

}

.riTextBox

{

color: Black !important;

}

.RadForm_Web20.rfdFieldset legend

{

color: #6788be;

}

.rwTable

{

height: 337px;

}

#TabLeftSide

{

float: left;

}

#TabRightSide

{

float: right;

padding-right: 55px;

}

#TabButton

{

text-align: left;

padding-top: 2px;

}

#BottomButton

{

margin-top: 10px;

margin-left: 170px;

}

#TabProperties

{

height: 112px;

width: 380px;

padding-right: 10px;

}

#RefreshArea

{

padding: 2px;

}

#RefreshLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#RefreshRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 5px;

}

#CycleArea

{

padding: 2px;

}

#CycleLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#CycleRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 13px;

}

I went ahead and tried a few things in the CSS:

I tried setting the padding/margins explicitly. This didn't have any affect on IE8, and had adverse effects on Chrome.
I tried forcing the style "display" to "block" via "display: block !important", but still saw inline-esque properties in IE8.
I looked at this thread and attempted to use more-specific class names to apply the CSS, but wasn't successful.

At that point, I started wondering what parts of my problem were already fixed by Telerik's FormDecorator (most noticeably it seems to fix the fieldset/legend/IE8 issue) and what problems needed a little more polishing. As such, I am here.

Any advice?

Cheers,

Sean

3 Answers, 1 is accepted

answered on 14 Sep 2011, 09:42 AM

IE8fix.gif

Hi Sean,

This difference occurs due to a difference in the rendering of elements decorated by RadFromDecorator. When we want to apply rounded corners to the form elements we are using CSS3 and it works fine in all modern browsers as you noticed. However IE under version 9 does not support CSS3 and that`s way it is necessary to render a different table around to decorated element in order to simulate the rounded corners. It could be ugly as you noticed in some cases, but this is the best approach to achieve cross-browser compatibility between old and new browsers.

In that case if you apply padding directly to the input element it will be broken in older browsers because of the wrapping table. In that case, you should apply the padding to the first wrapping DIV element nested in the fieldset element. In you case, these are #RefreshArea in the first fieldset, #TabPropertiesArea in the second fieldset (the DIV exists in your code, but the id was applied by me), #CycleArea in the third fieldset.

Now you should apply overflow: auto to these elements in order to wrap properly the other floated elements nested in them. Next step is to apply the necessary padding and to specify it to be readable by IE only. Last step should be to override again that padding in IE9 as it is not necessary in that browser.

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

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

body

{

font-size: 12px;

font-family: "segoe ui" ,arial,sans-serif;

overflow: hidden;

}

.LabelEnabled

{

color: Black !important;

}

.LabelDisabled

{

color: Gray !important;

}

.riTextBox

{

color: Black !important;

}

.RadForm_Web20.rfdFieldset legend

{

color: #6788be;

}

.rwTable

{

height: 337px;

}

#TabLeftSide

{

float: left;

}

#TabRightSide

{

float: right;

padding-right: 55px;

}

#TabButton

{

text-align: left;

padding-top: 2px;

}

#BottomButton

{

margin-top: 10px;

margin-left: 170px;

}

#TabProperties

{

height: 112px;

width: 380px;

padding-right: 10px;

}

#RefreshArea

{

padding: 2px;

}

#RefreshLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#RefreshRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 5px;

}

#CycleArea

{

padding: 2px;

}

#CycleLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#CycleRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 13px;

}

/* IE 7/8 fixes */

.rfdRoundedWrapper_fieldset

{

display: block\9 !important;

}

#RefreshArea, #TabPropertiesArea, #CycleArea

{

overflow: auto;

margin: 3px 5px 5px 5px\9;

}

/* makes IE9 works back to normal modern browsers */

._Telerik_IE9 #RefreshArea,

._Telerik_IE9 #TabPropertiesArea,

._Telerik_IE9 #CycleArea

{

padding: 0;

}

</style>

</head>

<body>

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

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

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"

Skin="Web20" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CheckBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadListBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadButton1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" />

<telerik:AjaxUpdatedControl ControlID="RadTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox4">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var radListBox1ID = "<%= RadListBox1.ClientID %>";

var radTextBox1ID = "<%= RadTextBox1.ClientID %>";

var radButton1ID = "<%= RadButton1.ClientID %>";

var radNumericTextBox1ID = "<%= RadNumericTextBox1.ClientID %>";

var radNumericTextBox2ID = "<%= RadNumericTextBox2.ClientID %>";

var checkBox1ID = "<%= CheckBox1.ClientID %>";

var checkBox4ID = "<%= CheckBox4.ClientID %>";

var ajaxManagerID = "<%= RadAjaxManager1.ClientID %>";

</script>

</telerik:RadCodeBlock>

<fieldset id="RefreshProperties">

<legend>Refresh Settings</legend>

<div id="RefreshArea">

<div id="RefreshLeftSide">

Auto-Refresh Enabled:

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" />

</div>

<div id="RefreshRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Label="Auto-Refresh Interval (Minutes):"

MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False"

LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<fieldset id="TabProperties">

<legend>Tab Settings</legend>

<div id="TabPropertiesArea">

<div id="TabLeftSide">

<telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True" AllowReorder="True"

EnableDragAndDrop="True" Skin="Web20" Height="88px" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"

Width="150px" OnClientLoad="OnClientLoad" />

</div>

<div id="TabRightSide" onclick='OnClientMouseClick("notbody")'>

<telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="Enter tab name"

Skin="Web20" Width="150px" />

<div id="TabButton">

<telerik:RadButton ID="RadButton1" runat="server" Skin="Web20" Text="Add Tab" OnClientClicked="OnButtonClicked"

AutoPostBack="False">

</telerik:RadButton>

</div>

</fieldset>

<fieldset id="CycleProperties">

<legend>Tab Cycle Settings</legend>

<div id="CycleArea">

<div id="CycleLeftSide">

Auto-Cycle Enabled:

<asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" />

</div>

<div id="CycleRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox2" runat="server" Label="Auto-Cycle Interval (Minutes):"

MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False"

LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<div id="BottomButton">

<telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Apply" />

</div>

</form>

</body>

</html>

All changes and critical zones are marked in yellow. Attached is IE8fix.gif showing the result in IE8 after the fixes in the above code.

Best wishes,
Bozhidar
the Telerik team

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.

answered on 23 Sep 2011, 12:03 AM

NoBottomPadding.png

Hi Telerik,

Thank you for your detailed response. This has proved sufficient, but I had a few comments.

So, first off, everything works great -- except there seems to be a very slight padding issue on the TabPropertiesArea. Setting overflow: auto causes the scrollbar to show up because the RadListBox seems to be breaking out of its div. I managed to remove the scrollbar, but wasn't able to get the RadListBox to move away from the bottom of the fieldset. I've attached a picture showing what I mean, but I used the following code to remove the scrollbar:

#TabPropertiesArea

{

padding-bottom: 10px\9;

}

Other than that, things seem to be working as expected - awesome! To those reading this in the future, though:

There is a mis-match between "margin" and "padding" in the provided example. In one CSS rule the margin is being set, but in the other the padding is being cleared. I set these both to margin for my scenario because I already had some padding rules, but either seem to work fine.
The TabProperties fieldset is highlighted, when in reality the relevant object is a couple of lines lower -- you want TabPropertiesArea div.
The "\9" you see everywhere is a CSS hack. This causes the CSS to only apply to IE7 and IE8, but no other browsers.
Overflow-auto is indeed necessary, even when overflow isn't visible..fixes spacing issues.

Kind Regards,

Sean

Accepted

answered on 26 Sep 2011, 02:36 PM

Hi Sean,

Overflow: auto to the fieldset that wraps the listbox will fix the issue:

<%@ 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 id="Head1" runat="server">

<title></title>

<style type="text/css">

body

{

font-size: 12px;

font-family: "segoe ui" ,arial,sans-serif;

overflow: hidden;

}

.LabelEnabled

{

color: Black !important;

}

.LabelDisabled

{

color: Gray !important;

}

.riTextBox

{

color: Black !important;

}

.RadForm_Web20.rfdFieldset legend

{

color: #6788be;

}

.rwTable

{

height: 337px;

}

#TabLeftSide

{

float: left;

}

#TabRightSide

{

float: right;

padding-right: 55px;

}

#TabButton

{

text-align: left;

padding-top: 2px;

}

#BottomButton

{

margin-top: 10px;

margin-left: 170px;

}

#TabProperties

{

height: 112px;

width: 380px;

padding-right: 10px;

}

#RefreshArea

{

padding: 2px;

}

#RefreshLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#RefreshRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 5px;

}

#CycleArea

{

padding: 2px;

}

#CycleLeftSide

{

text-align: center;

float: left;

clear: none;

margin-top: 3px;

}

#CycleRightSide

{

text-align: center;

float: left;

clear: none;

margin-left: 13px;

}

/* IE 7/8 fixes */

.rfdRoundedWrapper_fieldset

{

display: block\9 !important;

}

#RefreshArea, #TabPropertiesArea, #CycleArea

{

overflow: auto;

margin: 3px 5px 5px 5px\9;

}

/* makes IE9 works back to normal modern browsers */

._Telerik_IE9 #RefreshArea, ._Telerik_IE9 #TabPropertiesArea, ._Telerik_IE9 #CycleArea

{

padding: 0;

}

</style>

</head>

<body>

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

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

</telerik:RadScriptManager>

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"

Skin="Web20" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="CheckBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadListBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadButton1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadListBox1" />

<telerik:AjaxUpdatedControl ControlID="RadTextBox1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="CheckBox4">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadNumericTextBox2" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

var radListBox1ID = "<%= RadListBox1.ClientID %>";

var radTextBox1ID = "<%= RadTextBox1.ClientID %>";

var radButton1ID = "<%= RadButton1.ClientID %>";

var radNumericTextBox1ID = "<%= RadNumericTextBox1.ClientID %>";

var radNumericTextBox2ID = "<%= RadNumericTextBox2.ClientID %>";

var checkBox1ID = "<%= CheckBox1.ClientID %>";

var checkBox4ID = "<%= CheckBox4.ClientID %>";

var ajaxManagerID = "<%= RadAjaxManager1.ClientID %>";

function OnClientLoad() {

}

function OnClientSelectedIndexChanged() {

}

function OnButtonClicked() {

}

</script>

</telerik:RadCodeBlock>

<fieldset id="RefreshProperties">

<legend>Refresh Settings</legend>

<div id="RefreshArea">

<div id="RefreshLeftSide">

Auto-Refresh Enabled:

<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" />

</div>

<div id="RefreshRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Label="Auto-Refresh Interval (Minutes):"

MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False"

LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<fieldset id="TabProperties" style="height: auto;">

<legend>Tab Settings</legend>

<div id="TabPropertiesArea">

<div id="TabLeftSide">

<telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True" AllowReorder="True"

EnableDragAndDrop="True" Skin="Web20" Height="95px" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"

Width="150px" OnClientLoad="OnClientLoad" />

</div>

<div id="TabRightSide" onclick='OnClientMouseClick("notbody")'>

<telerik:RadTextBox ID="RadTextBox1" runat="server" EmptyMessage="Enter tab name"

Skin="Web20" Width="150px" />

<div id="TabButton">

<telerik:RadButton ID="RadButton1" runat="server" Skin="Web20" Text="Add Tab" OnClientClicked="OnButtonClicked"

AutoPostBack="False">

</telerik:RadButton>

</div>

</fieldset>

<fieldset id="CycleProperties">

<legend>Tab Cycle Settings</legend>

<div id="CycleArea">

<div id="CycleLeftSide">

Auto-Cycle Enabled:

<asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" />

</div>

<div id="CycleRightSide">

<telerik:RadNumericTextBox ID="RadNumericTextBox2" runat="server" Label="Auto-Cycle Interval (Minutes):"

MaxValue="60" MinValue="1" ShowSpinButtons="True" Value="1" Width="225px" Enabled="False"

LabelCssClass="riLabel LabelDisabled" DataType="System.Int32">

<NumberFormat DecimalDigits="0" AllowRounding="False" />

</telerik:RadNumericTextBox>

</div>

</fieldset>

<div id="BottomButton">

<telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Apply" />

</div>

</form>

</body>

</html>

When you have floated elements, their main wrapping element sometimes loses its height.

Best wishes,
Bozhidar
the Telerik team

Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.