CODEWITHSUNDEEP
htmlcsspaddingfieldset
Muleskinner
Muleskinner

Reputation: 14468

padding a fieldset, trouble with IE

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?

Upvotes: 4

Views: 17715

Answers (3)

wdm
wdm

Reputation: 7189

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;
}

Upvotes: 7

Yogesh Pitale
Yogesh Pitale

Reputation: 165

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

Upvotes: 2

clairesuzy
clairesuzy

Reputation: 27624

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

Upvotes: 1

Related Questions