How to Set the Margin of an Object in Ie

How do I set the margin of an object in IE?

[Updated in 2016] On all current browsers (including IE8+), your code

document.getElementById(ObjectId).style.marginTop = Value.ToString() + 'px';

works fine.

On very old IE (< 8) versions, you must use this non-standard contraption instead:

document.getElementById(ObjectId).style.setAttribute(
   'marginTop', Value.ToString() + 'px');

EDIT - From deleted comment by OP:

Note that while you can use style.setAttribute('margin-top', ..) in current IEs, 8 and older require style.setAttribute('marginTop', ..)

Using margin: 0 auto; in Internet Explorer 8

It is a bug in IE8.

Starting with your second question: “margin: 0 auto” centers a block, but only when width of the block is set to be less that width of parent. Usually, they get to be the same. That is why text in the example below is not centered.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <b style="display: block; margin: 0 auto; ">text</b>
</div>

Once the display style of the b element is set to block, its width defaults to the parents width. CSS spec 10.3.3 Block-level, non-replaced elements in normal flow describes how: “If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.” The equality mentioned there is

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block

So, normally all autos result in a block width being equal to the width of containing block.

However, this calculation should not be applied to INPUT, which is a replaced element. Replaced elements are covered by 10.3.4 Block-level, replaced elements in normal flow. Text there says: “The used value of 'width' is determined as for inline replaced elements.” The relevant part of 10.3.2 Inline, replaced elements is: “if 'width' has a computed value of 'auto', and the element has an intrinsic width, then that intrinsic width is the used value of 'width'”.

I guess that the scenario CSS cares about is IMG element. Stackoverflow logo in this example will be centered by all browsers.

<div style="height: 100px; width: 500px; background-color: Yellow;">    
    <img style="display: block; margin: 0 auto; " border="0" src="http://stackoverflow.com/content/img/so/logo.png" alt="">
</div>

INPUT element should behave the same way.

IE and Chrome calculating CSS padding differently

Try using line-height:18px; and no vertical padding (padding:0 2px;).

Browser support for margin: auto

Although you probably don't want to adjust your code to work in antique browsers that don't support margin: 0 auto;, but since you asked:

Support started only with IE6. If you want to support earlier browsers, you can add text-align: center; to the parent element. This works because old browsers incorrectly apply text-align also to block-elements. At the same time, keep margin: 0 auto; for modern browsers. If you want text-align: center to work in modern browser as well, you can also set display: inline-block; - then you won't need margin: 0 auto;.

So assuming this is your HTML:

<div id="outer">
    <div id="inner"></div>
</div>

you have these options:

Option 1

#outer {
    background: pink;
    width: 100%;
    text-align: center; /* for very old browsers */
}

#inner {
    background: green;
    display: inline-block;
    width: 50px;
    height: 50px;
    margin: 0 auto; /* for >99% of browsers */
}

Option 2

#outer {
    background: pink;
    width: 100%;
    text-align: center;
    height: 50px; /* height of child - necessary for IE8 and IE9,
    otherwise the height is slightly larger than that of the child */
}

#inner {
    background: green;
    display: inline-block; /* necessary for modern browsers, IE8+ */
    width: 50px;
    height: 50px;
}

But as I said, before supporting such ancient browsers, you may really think if the extra effort is worth it, or if it's better to just drop support for them.

---

Related Topics