Divs inside another, shows up when .slideDown() is used in the outer div with Jquery and IE8

Question

The above code works well in all browsers except in IE8 where it only works in compatibility-mode. I removed all the markup inside the DIVs, there where huge TABLEs. In IE8 when I check the checkbox('rf'), it is suposed to show only two DIVS(#frmRF and #frmAntenas), but it's also showing the DIV(#frmTX), if you think the markup is not ok, it was generated by Zend_Form, I'd like to not have a hidden for each checkbox I create.

 <script>
$('input[name="rf"]').change(function(){
    if($(this).is(':checked')){
        $("#frmRF").show();
        $("#frmAntenas").slideDown();
    }else{
        $("#frmRF").slideUp('slow');
        if(!$('input[name="tx"]').is(':checked'))
            $("#frmAntenas").slideUp('slow');
    }
});
</script>

<TABLE>
<TR>
    <TD>
        <INPUT value=0 type=hidden name=rf ><INPUT id=rf value=1 type=checkbox name=rf> <FONT class=legenda>RF</FONT>
    </TD>
</TR>
</TABLE>

<div id=frmAntenas style="display:none;">
<fieldset> 
<legend>Especificações Técnicas da Solicitante:</legend>

    <div style='margin-top: 10px' id='frmRF' style="display:none;">

    </div>

    <div style='margin-top: 10px' id='frmTX' style="display:none;">

    </div>

</fieldset> 
</div>

Answer 1

First of all sorry, I have no clue how to comment, don't see any button for it. I think I've had a similar problem for a while and I have turned off slidedown for IE. I think this is just something IE doesn't handle too well.. So I think you should try this and see if it works:

   <script>
    $('input[name="rf"]').change(function(){
    var speed  = $.browser.msie ? 0 : "slow";
        if($(this).is(':checked')){
            $("#frmRF").show();
            $("#frmAntenas").show(speed);
        }else{
            $("#frmRF").hide(speed);
            if(!$('input[name="tx"]').is(':checked'))
                $("#frmAntenas").hide(speed);
        }
    });
    </script>

I believe slideup/down does the same as showing and hiding stuff ("slow"), so i adjusted that.

Lauw

Edit:

It worked for me when I put it online and changed your HTML to the following:

<div id=frmAntenas style="display:none;">
<fieldset> 
<legend>Especificações Técnicas da Solicitante:</legend>

    <div id='frmRF' style="display:none; margin-top: 10px">

    </div>

    <div id='frmTX' style="display:none; margin-top: 10px">

    </div>

</fieldset> 
</div>

The thing here is that you were defining 'style' twice on the div, so it did not catch on to the display:none; Editted answer after commenting. Hope this solves it,

Lauw