IE6: selection inside jQuery tabs doesn't display dropdown

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 the form is located. The problem is that on a remote computer with IE6, both select only a small blank line instead of a list with options when you press the down arrow:

Invalid dropdown menu http://queen3.at.tut.by/DropDownIE6jQuery.PNG

The parameters are in the source of the page, and everything works on other machines, in other browsers, and also in IE6 (although I use IETester).

Everything works if I

• delete tabs, i.e. .tabs () - parameters appear and work; or
• first select the tab without a form (tab 0), and then click on it - the parameters appear and work
  • only when pressed; software .tabs ("select", 1) after creating tabs doesn't help

Does anyone know what might cause this? Is this an IE6 bug or something with my scripts?

Update: hm, thanks to this , I found something with my CSS - if I turn off Site.css, it works. I only thought about scripts. Still need to find out what it is.

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

 body { font-size: 0.7em; } 

It works if I set the value to 0.8 or more, but for 0.7 and less IE6 makes the indicated error.

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

Answer 1

I also ran into this exact problem, although I could not fix it by changing the font size of any body, I was able to get around it using the (slightly modified) Ugly hack method, as described in dev.jqueryui.com/ticket/4734 , Sent 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); } 

Timeout seems to be the key to preventing this error.

Answer 2

I found that this workaround fixes the problem on some machines, but not on others.

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

This fixed it for me.