padding a fieldset, trouble with IE

Question

What is going on with rendering the padding of a fieldset. It behaves as expected in FF and Chrome but fails in IE. This is the code im talking about:

<html>
    <head>
    </head>
    <body>
        <fieldset>
            <legend>Hello world!</legend>
            <div>Lorem ipsum</div>                
        </fieldset>
    </body>
</html>

And this is the css

fieldset {
    border: 1px solid black;
    padding: 30px;
    }
    fieldset legend {
        background-color: silver;
    }
    fieldset div {
        border: 1px dotted silver;
    }

Can also be seen here: http://jsfiddle.net/nRAGM/6/

So my question is: how to get the above html to display as intended in IE?

score 7 · Accepted Answer · edited Jul 15 '13 at 20:02

The following code is cross-browser compatible.

You can control the indent of the fieldset legend independently. In padding the fieldset you also indent the legend. While this may be the desired effect in some cases, the following method offers more flexibility. Also adding the margin to the inner div will give you better control of your layout (because adding padding to a container can add unwanted width).

http://jsfiddle.net/nRAGM/35/

fieldset {
  border: 2px solid silver;
}

fieldset legend {
    border: 2px solid silver;
    margin-left: 30px;
}

fieldset div {
    border: 1px dotted silver;
    margin: 30px;
}

score 2 · Answer 2 · edited Sep 27 '12 at 07:30

2

Adding display:block to fieldset styling should solve your problem. It worked for me! Try out.

edited Sep 27 '12 at 07:30

j0k

22,600
28
79
90

answered Aug 05 '12 at 12:55

Yogesh Pitale

115
1
1
11

This is actually even better than the accepted answer, because it doesn't break things like `textarea {box-sizing: border-box; width: 100%;}`. – bkis Feb 08 '19 at 13:10

score 1 · Answer 3 · answered Apr 12 '11 at 09:05

or the really naughty hack (or put it in a conditional [lte IE 8] CSS) version.

fieldset {
    border: 1px solid black;
    padding: 30px;
}
fieldset legend {
    background-color: silver;
    margin-bottom: 30px\9; /* IE7/8 needs this - same value as top padding on fieldset */
}
fieldset div {
    border: 1px dotted silver;
}

margining the bottom of the label the same as the fieldset's top padding does the trick too. obviously no other browser should get both

PS: I think this works for IE6 too

padding a fieldset, trouble with IE

3 Answers3