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:

Incorrect dropdown http://queen3.at.tut.by/DropDownIE6jQuery.PNG

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.

Answer 2

I found that this workaround fixed the issue on some machines, but not on others.

My solution was to hide all the select elements initally in the style sheet, then after calling $( "#tabs" ).tabs() I use $('select').show() to display them.

That fixed it for me.