IE6: select inside jQuery tabs does not render dropdown list

Question

I have a form inside jQuery tabs; I create tabs in a simple way:

$("#tabs").tabs({selected: 1});

The selected index 1 is the tab where form is placed. The problem is, on remote computer with IE6 both selects only display a small blank line instead of list with options when dropdown arrow is clicked:

The options are there in page source, and everything actually works on other machines, in other browsers and also in IE6 (though I use IETester).

Everything also works if I

• remove tabs creation, that is .tabs() - options do appear and work; or
• first select tab without form (tab 0), and then click on it - options do appear and work
  • only when clicking; programmatic .tabs("select", 1) after tabs creation doesn't help

Does anyone know what can cause this? Is it IE6 bug or something with my scripts?

Update: hm, thanks to this, I found it's something with my CSS - if I disable Site.css it works. I thought about scripts only. Still have to find out what's that.

Update: OK, this was caused by this CSS rule:

body { font-size: 0.7em; }

It works if I set 0.8 or greater, but for 0.7 and less IE6 does the indicated bug.

Can someone explain this? Yes it is IE6 - weird by definition, but this one is too weird in my opinion.

Answer 1

I have also ran into this exact problem, although I couldn't fix it by altering any body font sizes, I did manage to get around it using the (slightly modified) "Ugly hack" method as described in the dev.jqueryui.com/ticket/4734 link, posted by CiscoIPPhone:

// Ugly hack to switch tabs in IE6, fixing select menu bug.
  if($.browser.msie && $.browser.version.substr(0, 1) <= 6) {
    $("#tabs").tabs({ selected: 1 }); 
    setTimeout(function() {
       $("#tabs").tabs("select", 0);
    }, 10);
  }

Seems as though the timeout is the key to avoiding this bug.