JQuery offset () does not work in some browsers, on some computers

Question

I have a problem positioning an element in some browsers. I use jQuery autocomplete here here . A div containing autocomplete values ​​should be directly below the text box and fit perfectly. The code sets the css left property for the div using the left property generated by $(textbox).offset();

After removing the code, in order to try to fix my problem, I get the following:

 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(); 

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

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

I disconnected the plug-ins, changed the screen resolution, redid the windows ... It just sometimes works in some places.

Can anyone think of something that I am missing?

UPDATE : I reworked my code to use the autocomplete that comes 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 anybody work?

Here is the javascript from the user interface autocomplete function that fires:

 .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 clearly located in the wrong place.

Answer 1

I finally realized what was going on. I had a css rule defining the width of the body:

 body { width: 900px; } 

As soon as I changed it to width: 100%; and embedded the whole page in a div with a width of 900px, it worked as expected.

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

I hope this answer saves someone else all the time I spent on it ...

Answer 2

I met a similar question, finally found that the float property affects relative , which makes the relative div unstable in Internet Explorer 8, but works well in firefox.