Question

I have a problem positioning an element in certain browsers. I’m using the jQuery autocomplete found here. The div containing autocomplete 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 computers (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 autocomplete 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 autocomplete breaks because it uses offset. Does anyone have a work around?

Here is the javascript from the UI autocomplete 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.

Answer 1

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…