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?
I went ahead and tried a few things in the CSS:
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
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
>
</
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
>
</
div
>
</
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
>
</
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_Web
20
.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