Fieldset padding in IE8

问题:

I am pretty new to web work. I apologize if this question is trivial or overkilled. I did some searching for fieldset padding, but didn't see anything specific to this.

Here is what my window looks like in Chrome vs IE8.

Chrome: http://i.stack.imgur.com/rH7w0.png IE8: http://i.stack.imgur.com/6v6kZ.png

As you can see, all of the padding has been completely thrown away.

    <fieldset>
    <legend>Refresh Settings</legend>
    <table>
        <tr>
            <td class="AutoRefreshEnabled">
                Auto-Refresh Enabled:</td>
            <td class="AutoRefreshCheckbox">
            <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" />
            </td>
            <td class="AutoRefreshNumericTextbox">
                <telerik:RadNumericTextBox ID="RadNumericTextBox1" Runat="server" 
                    Label="Auto-Refresh Interval (Minutes):" MaxValue="60" MinValue="0" 
                    ShowSpinButtons="True" Value="0" Width="225px" Enabled="False" 
                    LabelCssClass="riLabel LabelDisabled">
                <NumberFormat DecimalDigits="0" />
                </telerik:RadNumericTextBox>
            </td>
        </tr>
    </table>
</fieldset>

<fieldset>
    <legend>Tab Settings</legend>
        <div>
            <div class="FloatLeft">
                <telerik:RadListBox ID="RadListBox1" runat="server" AllowDelete="True" AllowReorder="True" 
                                EnableDragAndDrop="True" Skin="Web20" Height="95px" 
                                onclientitemdoubleclicked="OnClientItemDoubleClicked" 
                                onclientselectedindexchanged="OnClientSelectedIndexChanged" 
                    Width="150px" AutoPostBack="True" AutoPostBackOnReorder="True" 
                    onreordering="RadListBox1_Reordering" onclientload="OnClientLoad">
                </telerik:RadListBox>
            </div>
            <div class="FloatRight">
                <telerik:RadTextBox ID="RadTextBox1" Runat="server" EmptyMessage="Enter tab name" Skin="Web20" Width="150px">
                </telerik:RadTextBox>
                <div class="TabButton">
                    <telerik:RadButton ID="RadButton1" runat="server" onclick="RadButton1_Click" Skin="Web20" Text="Add Tab" 
                        onclientclicked="OnButtonClicked">
                    </telerik:RadButton>
                </div>
            </div>   
        </div>
</fieldset>

<fieldset>
    <legend>Tab Cycle Settings</legend>
    <table>
        <tr>
            <td class="AutoCycleEnabled">
                Auto-Cycle Enabled:</td>
            <td class="AutoCycleCheckbox">
            <asp:CheckBox ID="CheckBox4" runat="server" AutoPostBack="True" oncheckedchanged="CheckBox1_CheckedChanged" />
            </td>
            <td class="AutoCycleNumericTextbox">
                <telerik:RadNumericTextBox ID="RadNumericTextBox2" Runat="server" 
                    Label="Auto-Cycle Interval (Minutes):" MaxValue="60" MinValue="0" 
                    ShowSpinButtons="True" Value="0" Width="225px" Enabled="False" 
                    LabelCssClass="riLabel LabelDisabled">
                <NumberFormat DecimalDigits="0" />
                </telerik:RadNumericTextBox>
            </td>
        </tr>
    </table>
</fieldset>

<div class="BottomButtons">
    <telerik:RadButton ID="RadButton2" runat="server" Skin="Web20" Text="Apply" OnClientClicked="CloseAndSave" >
    </telerik:RadButton>
    <telerik:RadButton ID="RadButton3" runat="server" Skin="Web20" Text="Cancel" OnClientClicked="CloseAndCancel" >
    </telerik:RadButton>
</div>

body
{
    font-size: 12px;
    font-family: "segoe ui",arial,sans-serif;
}

.LabelEnabled
{
    color: Black !important;
}

.LabelDisabled
{
    color: Gray !important;
}

.riTextBox
{
    color: Black !important;
}

.AutoRefreshEnabled
{
    width: 123px;
}

.AutoRefreshCheckbox
{
    width: 20px;
}

.AutoRefreshNumericTextbox
{
    width: 32px;
}

.AutoCycleEnabled
{
    width: 123px;
}

.AutoCycleCheckbox
{
    width: 20px;
}

.AutoCycleNumericTextbox
{
    width: 32px;
}

.TimeframeRestricted
{
    width: 314px;
}

.DataPointsShown
{
    width: 314px;
}

.TimeframeCheckbox
{
    width: 40px;
}

.DatapointsCheckbox
{
    width: 40px;
}

.TimeframeDateTimePickers
{
    width: 150px;
}

.FloatLeft
{
    float: left;
}

.FloatRight
{
    float: right;
    padding-right: 55px;
}

.TabButton
{
    text-align: left; 
    padding-top: 2px;
}

.BottomButtons
{
    position: absolute; 
    left: 134px; 
    bottom: 13px;
}

Does anyone with more web development experience than I have an easy explanation for this issue? It would be much appreciated.

Thanks for your time.

回答1:

it is an IE thing, and legend is the culprit a simpler fiddle with some "garish" coloring and forced padding shows the only fieldset that actually contains itself is the one without a legend - http://jsfiddle.net/eDtDh/

I have never used legend and I forgot why but I think this is the reason it's the same in IE7/6 etc.... you could build in your own legend via a heading element and relatively position it to look similar to a legend