I have a problem positioning an element in certain browsers. I'm using the jQuery autoplete found here. The div containing autoplete values should be directly under the text box, and line up perfectly. The code sets the css left property of the div by using the left property generated by $(textbox).offset();

After un-packing the code to try and fix my problem, I get this:

var a = $(textbox).offset();
element.css({
    width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(),
    top: a.top + textbox.offsetHeight,
    left: a.left
}).show();

This seems like it should work, and it does work in Firefox. It doesn't work in IE8, Chrome. The top position is always correct, but the sometimes the div is too far to the left, or too far to the right.

On different puters (all with Windows XP), it works in IE8... how can this be? I've also tested it on my Mac, OS 10.5. It works in Firefox, but not Safari.

I've disabled plug-ins, changed screen resolutions, re-sized windows... It just inconsistently works in some places sometimes.

Can anyone think of something I'm missing?

UPDATE: I have re-worked my code to use the autoplete supplied with jQuery 1.4.2 and jQuery UI 1.8rc3. It is still broken, same problem. Please help!

UPDATE 2: See this related question. jQuery UI autoplete breaks because it uses offset. Does anyone have a work around?

Here is the javascript from the UI autoplete function that trips up:

.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' })

If it is changed to top: '0px', left: '0px' it works fine, but is obviously positioned in the wrong spot.

I have a problem positioning an element in certain browsers. I'm using the jQuery autoplete found here. The div containing autoplete values should be directly under the text box, and line up perfectly. The code sets the css left property of the div by using the left property generated by $(textbox).offset();

After un-packing the code to try and fix my problem, I get this:

var a = $(textbox).offset();
element.css({
    width: typeof e.width == "string" || e.width > 0 ? e.width : $(textbox).width(),
    top: a.top + textbox.offsetHeight,
    left: a.left
}).show();

This seems like it should work, and it does work in Firefox. It doesn't work in IE8, Chrome. The top position is always correct, but the sometimes the div is too far to the left, or too far to the right.

On different puters (all with Windows XP), it works in IE8... how can this be? I've also tested it on my Mac, OS 10.5. It works in Firefox, but not Safari.

I've disabled plug-ins, changed screen resolutions, re-sized windows... It just inconsistently works in some places sometimes.

Can anyone think of something I'm missing?

UPDATE: I have re-worked my code to use the autoplete supplied with jQuery 1.4.2 and jQuery UI 1.8rc3. It is still broken, same problem. Please help!

UPDATE 2: See this related question. jQuery UI autoplete breaks because it uses offset. Does anyone have a work around?

Here is the javascript from the UI autoplete function that trips up:

.css({ top: (offset.top + this.element.height) + 'px', left: offset.left + 'px' })

If it is changed to top: '0px', left: '0px' it works fine, but is obviously positioned in the wrong spot.

• javascript
• jquery
• css
• cross-browser
• jquery-autoplete

• x64 vs x32 rendering engines? – Josh E Commented Mar 11, 2010 at 16:39
• @Josh: not sure what you mean. All puters have 32 bit processors, and 32 bit windows xp – Peter Di Cecco Commented Mar 11, 2010 at 17:01
• This "offset" vs. "position" thing always confuses me. If this were my code, I'd try: (A) use "position()" instead of "offset()" and (B) see what happens when I wrap the problematic HTML in a "position: relative" div. – Pointy Commented Mar 11, 2010 at 17:04
• @peter - just wondering if you had checked to see if it is an x64 OS/browser issue since you mentioned that it works. Another thing to check is what differences there are in any updates applied to each machine, since IIRC, MS released some patches in the last few months that could possibly affect IE rendering – Josh E Commented Mar 11, 2010 at 17:19
• @Peter, have you checked that "position" of the element is set to "absolute"? – nikola Commented Mar 11, 2010 at 17:27

2 Answers 2

I finally figured out what was happening. I had a css rule defining the width of the body:

body {
    width: 900px;
}

Once I changed this to width: 100%; and enclosed the entire page in a div of width 900px, it worked as expected.

It looks like IE uses the body element to measure top and left values for offset(), but uses the window edge when to measure top and left distances when positioning an item absolutely.

I hope this answer will save someone else all the time I've wasted on this...

I met a similar question,finally discovered the float property affects relative,making the relative div not stable in Internet Explorer 8 but performs well in firefox.