Internet Explorer box model - what is offset?

Question

I am trying to adapt a site to support IE 7. I have a few elements, however, which are being offset to the right by 69px. I am testing in IE9, set to render the page as if it were IE7. When I turn on developer mode and inspect the element I notice that surrounding the "margin" there is a parameter called "offset".

I've never heard of this before and Googling has not helped me out much - I only managed to find something about float-offset, which was not the same, but I assume it was there to eliminate some of the issues of quirks mode? How can I eliminate this offset-parameter?

Obviously I have a IE-7 specific stylesheet set up and you can test the problem yourself by going to my testing environment on this link:

http://suitable.amok-adhoc.com/2012/

Solved:

Found a solution - it was pretty simple. Just had to explicitly declare the position like this (although it was inherited from the parent element in all other browsers IE added a margin and called it "offset", which is overridden by doing this):

p {
    left:0px;
}

Answer 1

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

Answer 2

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.

Answer 3

I had similar issue, my header menu width was not appearing correctly (was appearing in shrunk width), after some debugging I realized that I have added rem Poly-fill that was creating problem for me. I was using meta(http-equiv="x-ua-compatible" content="IE=Edge,chrome=1") too.

After removing rem-polyfil JS file, it started working correctly for me.

Answer 4

You can try to use: position: -ms-device-fixed; this trick helps me.