CODEWITHSUNDEEP
css
James Hughes
James Hughes

Reputation: 6194

Margins not being honored by IE

I have a form with a set of fieldsets. These fieldsets will be conditionally hidden and shown server side so I need these fieldsets to flow left to right top to bottom. The code below achieves this however the margin-bottom of 10px is not being honored by IE (IE7 only tested).

I read some posts that suggest this has to do with margins collapsing if you don;t add padding but I tried this and the same thing happens. How can I create a 10px space between 2 lines of fieldsets?

<html>
<head>
    <style>
        fieldset {
            display: inline-block;
            width: 30%;
            height:90px;
            vertical-align: top;
            border: 1px solid black;
            margin-bottom:10px;
        }
    </style>
</head>
<body>
    <form>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
        <fieldset>
            <label>Label:</label>
            <input type="text"/>
        </fieldset>
    </form>
</body>

Upvotes: 0

Views: 1278

Answers (4)

SvenFinke
SvenFinke

Reputation: 1254

If you change the display from inline-block to inline then it works fine in IE7 and FF3.

Upvotes: 0

eyelidlessness
eyelidlessness

Reputation: 63519

For IE 6 and 7,

display: inline;
zoom: 1;

on a block-level element is equivalent to inline-block because zoom triggers IE's hasLayout property (read more about it here)

Upvotes: 3

Phil Rae
Phil Rae

Reputation: 23

From: http://www.quirksmode.org/css/display.html

In IE 6 and 7 inline-block works only on elements that have a natural display: inline.

Firefox 2 and lower don't support this value. You can use -moz-inline-box, but be aware that it's not the same as inline-block, and it may not work as you expect in some situations.

Fieldsets have a natural display:block, not inline, so IE6/7 is getting upset.

Try changing inline-block to just 'block' (or 'inline' if you want them on the same line) and see if that fixes the problem.

Upvotes: 1

Meep3D
Meep3D

Reputation: 3756

I think IE likes to screw up inline-block - what if you just use block? That should fix the problem.

Upvotes: 0

Related Questions