views:

153

answers:

2

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.

A: 

There is no closing brace on the if statement.

corymathews
if (heightDifference < 0){heightDifference=0};
DA
Was that their a minute ago? Or were my eyes deceiving me?
corymathews
@jhurshman I didn't edit my original post, but maybe some other kind soul did? I'm definitely known for making typos.
DA
+2  A: 

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.

jhurshman
Whoa...that is...WEIRD! Your solution totally fixed it. So, any references/links that explain that particular issue in more details? It seems like this should be something jQuery is handling internally. Are there certain scenarios when this is more of an issue than others?
DA
I can't say that I've ever seen any explanation of what exactly the issue is and why this approach helps. Pretty much any issue that disappears when an alert is added can be "solved" with this. It's well-known at my company among the JS developers, so that it's practically a joke: "Did you try setTimeout-zero?"My best guess for what causes these issues is that IE maintains some data structures relating to the DOM tree in a non-thread-safe way. Doing a setTimeout-zero lets the current JS thread finish before trying something which will cause IE to need to access those data structures.
jhurshman
@jhurshman thanks for all the help/info. It's amazing that in 2010 I'm *STILL* discovering new ways for IE to p*ss me off! ;o)
DA