Post Reply 
 
Thread Rating:
  • 0 Votes - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Incorrect position under IE with not-body-container
24th May, 10:47
Post: #1
Incorrect position under IE with not-body-container
Such conditions should be met to reproduce this issue:
1. IE9,8,7. Chrome and Firefox is fine.
2. Tip target is wrapped by a position:relative container.
3. position-container prop is set to that container
4. The container has an auto margin-left/right

Test case: http://jsfiddle.net/fDavN/855/

I've spent lots of time on this issue, and found out that it's probably due to jQuery's position() function for at least all 1.4+ version. The whole story is kinda complicated.

Firstly, in position() function, the final result excludes element's marginLeft and marginTop, which I still don't know why this action is taken.
jquery-1.6.1.js:8790
<code>
// Subtract element margins
// note: when an element has margin: auto the offsetLeft and marginLeft
// are the same in Safari causing offset.left to incorrectly be 0
offset.top -= parseFloat( jQuery.css(elem, "marginTop") ) || 0;
offset.left -= parseFloat( jQuery.css(elem, "marginLeft") ) || 0;
</code>

Then, qtip2's position calculation is heavily rely on jquery.position(), see PLUGINS.offset().

And, when margin is auto, marginLeft's value is quite different between WebKit and IE, which results in this issue.

Actually, it's not IE's problem. You can change margin to a fixed value, like 50px. And then position is wrong even for WebKit browser. See http://jsfiddle.net/fDavN/856/ with chrome.
So my workaround is to stop using 'container' property.
Find all posts by this user
Quote this message in a reply
24th May, 11:43
Post: #2
RE: Incorrect position under IE with not-body-container
I'm stickying this as I can't really do anything to fix it, but it may be of interest to others.

Craig Thompson
Web Developer / Designer
Craigsworks
http://www.craigsworks.com
Visit this user's website Find all posts by this user
Quote this message in a reply
Post Reply 


Possibly Related Threads...
Thread: Author Replies: Views: Last Post
  [Solved] Position issue in FF/Safari with fixed width body / auto margin jwf 2 74 10th May 17:02
Last Post: jwf
  Observers on document vs body? texel 1 155 30th March 13:26
Last Post: Craig
  Constrain to container only on x-axis hofo 2 191 20th March 17:04
Last Post: hofo
  [Solved] div with overflow:auto - QTip displaying outside container Freakin 4 669 23rd January 22:51
Last Post: Freakin
  posOptions.container is undefined wahuy 1 318 20th January 17:10
Last Post: Craig
  [Solved] Container with overflow and scrolling while qTip is active FredyC 1 694 14th November 22:20
Last Post: Craig
  [Solved] iPad: qTip position is incorrect, offset by scroll kiddailey 28 4,326 11th November 01:06
Last Post: andrewd
  [Solved] qTip on a qTip, prevent container qTip to disappear when hovering over child qTip Mr.Goodbar 6 1,133 6th October 17:06
Last Post: Mr.Goodbar
  [Solved] Problem with position container elgransan 3 1,019 4th September 20:04
Last Post: elgransan
  [Solved] Incorrect behavior with multi targets and hide delay sherlockq 3 514 26th May 21:11
Last Post: Craig



User(s) browsing this thread: 1 Guest(s)