Skip to main content

Bug Tracker

Side navigation

#1160 closed bug (wontfix)

Opened May 03, 2007 10:16PM UTC

Closed June 15, 2007 08:58PM UTC

Last modified March 15, 2012 01:19AM UTC

Dimensions: <body> with margin auto results in bogus values from offset() on IE

Reported by: mikeker Owned by:
Priority: minor Milestone: 1.1.3
Component: plugin Version: 1.1.2
Keywords: dimensions Cc:
Blocked by: Blocking:
Description

Using the Dimensions plugin (v 1.0a) and jQuery (v1.1.2). On IE (6 or 7),

offset()
doesn't take into account the margin on the
<body>
tag when
margin: auto
is specified. Works as expected on FF2. Workaround is to insert wrapper div just inside the
<body>
tags and put your
<body>
styling there.

Example:

<script type='text/javascript'>
	$( document ).ready( function () {
		alert( $( '#test' ).offset().left );
	});
</script>
...
<body style='width: 600px; margin: auto;'>
	<p>
		Lorem ipsum dolor sit amet, <a id='test' href='#'>massa</a> elit facilisis, enim sociis lacinia in dui fusce quam etc.etc.etc.
	</p>
</body>
Attachments (0)
Change History (1)

Changed June 15, 2007 08:58PM UTC by brandon comment:1

description: Using the Dimensions plugin (v 1.0a) and jQuery (v1.1.2). On IE (6 or 7), {{{offset()}}} doesn't take into account the margin on the {{{<body>}}} tag when {{{margin: auto}}} is specified. Works as expected on FF2. Workaround is to insert wrapper div just inside the {{{<body>}}} tags and put your {{{<body>}}} styling there.\ \ Example:\ \ {{{\ <script type='text/javascript'>\ $( document ).ready( function () {\ alert( $( '#test' ).offset().left );\ });\ </script>\ ...\ <body style='width: 600px; margin: auto;'>\ <p>\ Lorem ipsum dolor sit amet, <a id='test' href='#'>massa</a> elit facilisis, enim sociis lacinia in dui fusce quam etc.etc.etc.\ </p>\ </body>\ }}}\ Using the Dimensions plugin (v 1.0a) and jQuery (v1.1.2). On IE (6 or 7), {{{offset()}}} doesn't take into account the margin on the {{{<body>}}} tag when {{{margin: auto}}} is specified. Works as expected on FF2. Workaround is to insert wrapper div just inside the {{{<body>}}} tags and put your {{{<body>}}} styling there. \ \ Example: \ \ {{{ \ <script type='text/javascript'> \ $( document ).ready( function () { \ alert( $( '#test' ).offset().left ); \ }); \ </script> \ ... \ <body style='width: 600px; margin: auto;'> \ <p> \ Lorem ipsum dolor sit amet, <a id='test' href='#'>massa</a> elit facilisis, enim sociis lacinia in dui fusce quam etc.etc.etc. \ </p> \ </body> \ }}} \
resolution: → wontfix
status: newclosed

Margins, borders and padding must be specified in pixel values for the calculations to be correct in IE. Unfortunately fixing IE in this manner would bring offset to a screeching halt in performance.