Question

IE6 is always surprising me but this one is REALLY odd.

I’m creating a horizontal menu where I need the text in each ‘button’ to be vertically centered. Easy in any browser except IE. So, for IE browsers, I’m using a bit of javascript to add the necessary padding to each button to make sure the text appears centered.

I got this working just fine in IE8 and IE7. IE6 just wasn’t doing it right for some reason.

So, I added an ALERT right before the line that adds the padding:

$menuTriggerUL.children('li').each(function(i){
        var heightDifference = tallestTab-tabTextHeight[i];
        if (heightDifference < 0){heightDifference=0};
        alert(heightDifference);
        $(this).children('a:first').css("padding-top", Math.floor(heightDifference/2) );
    });

With that alert there, IE6 will one-by-one apply the correct padding to each element properly.

If I take the alert out, it fumbles and gets the first one right, but stumbles on the subsequent ones.

It seems like that jQuery is trying to go faster than IE6 can handle it. Obviously that’s likely not what’s happening, but am not sure how else to describe it.

Some things that might be part of the issue: I’m using a jQuery each() function and, within, grabbing values from a previous populated array.

Any theories as to what might be going on?

UPDATE: jhurshman’s answer below was the solution. I’d love to know more about this issue and if folks have some ideas as to which scenarios might trigger this issue for IE6. I’ve never run into it, but am glad to have a fix in the toolbag for future use.

Answer 1

In working with IE (6 especially, but with 7 also sometimes), there are fairly frequently situations where the DOM doesn’t seem to be ready immediately after it’s been manipulated in some way. Very frequently, such issues are resolvable by deferring the problematic code by doing something like:

setTimeout(troublesomeCode, 0);

(where troublesomeCode is a reference to a function which will perform the problematic operations)

I would also try looping over the nodes in reverse order and see if that makes any difference.