38

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;
}
4
  • 1
    See this SO answer: stackoverflow.com/questions/4817745/…
    – Kibria
    Commented Oct 8, 2012 at 5:37
  • Not Found The requested URL /2012/ was not found on this server. Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request. Commented Apr 8, 2013 at 17:31
  • Sorry, that was my development environment - I'm not keeping that running a year after ;) But The thread Kibria links to provide a really good explanation, which is in line with the fix I found myself.
    – zkwsk
    Commented Apr 12, 2013 at 12:22
  • 2
    You should probably move your solution to an answer below.
    – BoltClock
    Commented Apr 12, 2013 at 15:22

4 Answers 4

33

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:

enter image description hereenter image description here

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

enter image description here

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.

3
  • 4
    CSS2.1 informally calls them offsets too, by the way: w3.org/TR/CSS21/visuren.html#position-props
    – BoltClock
    Commented Apr 12, 2013 at 15:18
  • 1
    Nice find, @BoltClock. I'm not shocked by the use of offset; it's a fairly common term even among DOM properties related to layout. I'm mostly shocked that Firefox, as awesome as it is, doesn't mention them.
    – Sampson
    Commented Apr 12, 2013 at 15:28
  • i has not set positions of elements, also no margins on self and parent, also i swithed off all styles on computed tab, but offset still here, and element was shifted to 10px (in chrome it not shifted, and set position left:-10px shift element also in chrome)
    – gdbdable
    Commented Oct 27, 2017 at 8:37
5

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

0

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.

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.