Internet Explorer Box Model - What Is Offset

Internet Explorer box model - what is offset?

The offset is the distance at which the element was moved from its original location. This is seen when you position an element either relative or absolute with left, top, bottom and/or right values. Take the following code as an example:

#header {
    top: 3em;
    left: 3em;
    position: relative;
}

If we inspect this element in Internet Explorer 10, we see the offset you were mentioning. The em values have been converted to pixels, but the effect is still visible. Note that we see something similar in the Chrome Developer Tools (also in Opera), only it's labeled as "position" instead:

Oddly enough, Firefox doesn't even appear to communicate the offset/position via their illustration:

In the end this is an issue of mere semantics. Whether we call it "offset" or "position," it's still the same thing; it's the distance from its original location on the screen.

Hope this helps.

Strange input offset issue with Internet Explorer

This seems weird, but you can try setting vertical-align: top in the CSS for the inputs. That fixes it in IE8, at least.

IE9 exibits 4px offset compared to IE8

Based on the screenshot, you're adding padding to an inline element.

Try adding:

display: inline-block;

And make the adjustments from there.

edit:

Inline elements don't apply margin/padding/width/height (well they shouldn't but browsers like ie have non-standard behaviours)

Block elements can have margin/padding/width/height but they cause elements to be stacked vertically.

inline-block is kind of a hybrid between them. They allow other inline elements to be placed vertically next to them, however you can also add margin/padding/width/height to them.

My general rule is that block level elements are the heavy construction elements in a page (the framework) where as inline is for the content within the page (bold, italics, etc). inline-block allows you to fudge inline elements a little with the margin, padding.

note: Just be aware that in older versions of ie this still isn't pixel perfect.

How do I remove the offset from an item with no width in IE?

It turns out this is a known issue with IE 10-11.

https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box

CSS: outline-offset alternative for IE?

Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.

HTML:

<div class="box"></div>

CSS:

.box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px;
    border: 2px solid green;
}
.box:after {
    content: "";
    position: absolute;
    top: -6px;
    left: -6px;
    display: block;
    width: 108px;
    height: 108px;
    border: 2px solid red;
}

​
The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.

HTML:

<div class="outer-box"><div class="inner-box"></div></div>

​
CSS:

.outer-box {
    width: 104px;
    height: 104px;
    margin: 100px;
    border: 2px solid red;
    padding: 2px;
}
.inner-box {
    width: 100px;
    height: 100px;
    border: 2px solid green;
}

​
Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!

Strange Offsetting in IE (all versions) compared to other browsers

Hm, I'm not sure but maybe using UL's instead of DIV's would somehow correct the issue... :)

How do I get rid of an element's offset using CSS?

That offset is basically the x,y position that the browser has calculated for the element based on it's position css attribute. So if you put a <br> before it or any other element, it would change the offset. For example, you could set it to 0 by:

#inputBox{position:absolute;top:0px;left:0px;}

or

#inputBox{position:relative;top:-12px;left:-2px;}

Therefore, whatever positioning issue you have, is not necessarily an issue with offset, though you could always fix it by playing with the top,left,right and bottom attributes.

Is your problem browser incompatibility?

Internet Explorer Shows CSS issue with outline-offset

IE does not support outline-offset. And you should test it in opera too. becouse if i correctly remember Opera does not suppot negative values...

---

Related Topics