JQuery - IE8 - fadeIn () / fadeOut () pixel offset

Question

I replace one absolutely positional vocabulary term with another as follows:

jQuery ('# replaceme'). fadeOut (150, function () {JQuery ('# WithMe') FadeIn (150).});

This is pretty simple code that looks and works great in all browsers except IE8. In IE8, while fadeOut () does its job, the entire text block is shifted by 2-3 pixels, and then discards 2-3 pixels by fadeIn ().

Any ideas on what could be causing this? Does anyone know a way to prevent this?

BTW: I get the same results with jQuery 1.3.1 as with 1.3.2. All my strict XHTML and CSS are validated.

Answer 1

Is this a transition from an inline element to an inline block or block?

using the ie8 developer tools, try changing the element's display:inline-block property to display:inline-block and see if a problem occurs.

edit: reply to comments

what is likely to happen, the element is extracted from the expected stream of documents (it is added to the body or a new parent is inserted, and this is added to it, etc.) and the css rules, which are usually applied, are not in this case.

use firebug to identify all the css rules that apply to this element, and then try adding this id element, #replaceme, to the selector list to ensure that the element becomes stylized as you expect. eg.

 dt > dd.def { } 

becomes

 dt > dd.def, #replaceme { }