IE6/7 do not .show .hide divs, all other browsers work fine

IE6/7 do not .show .hide divs, all other browsers work fine

Here's my issue, hoping someone can help.  I have a page with 5 roundabouts on it showing pictures depending on a button click.  Buttons would look like:
DOGS    CATS    BIRDS    FISH    REPTILES

So if you click Dogs, I want it to hide the roundabout for Cats, Birds, Fish, and Reptiles but show Dogs.  This works perfectly in FF, Chrome, IE8, IE7, but if I view in compatibility mode or with an IE6/7 browser, all 5 roundabouts show and even if I hit the buttons, which fire the show/hide code, nothing gets hidden.  Here's some code, I'm hoping someone has a tip on where I am going wrong in getting this simple show/hide of a div.

Here's my doc.ready.

$(document).ready(function() {
    $('div#DOGS ul').roundabout();
    $('div#CATS ul').roundabout();
    $('div#BIRDS ul').roundabout();
    $('div#FISH ul').roundabout();
    $('div#REPTILES ul').roundabout();
});

Here is my function showing what's supposed to show or hide the divs containing the roundabouts:

function ShowDOGS() {
    $("div#DOGS").show();
    $("div#CATS").hide();
    $("div#BIRDS").hide();
    $("div#FISH").hide();
    $("div#REPTILES").hide();
    $("a#DOGS").removeClass("active");
    $("a#CATS").removeClass("active");
    $("a#BIRDS").removeClass("active");
    $("a#FISH").removeClass("active");
    $("a#REPTILES").removeClass("active");
    $("a#DOGS").addClass("active");
}

So as you can see, it shows the DOGS div, hides the others, and sets the active class of the Dogs link (which appears as a button thanks to the CSS).  As you can imagine, I also have a ShowCATS, ShowFISH, ect, each with the appropriate .hide()/.show() options.

Here's my code for the menu, which is where the function above would be called....click the button and it shows the right div, hides the others, and sets the link that was just clicked as active, styled with the CSS.

<div id="RotatorNav">
<ul>
    <li><a id="DOGS" href="#" class="first" onclick="ShowDOGS(); return false;">DOGS</a></li>
    <li><a id="CATS" href="#" onclick="ShowCATS(); return false;">CATS</a></li>
    <li><a id="BIRDS" href="#" onclick="ShowBIRDS(); return false;">BIRDS</a></li>
    <li><a id="FISH" href="#" onclick="ShowFISH(); return false;">FISH</a></li>
    <li><a id="REPTILES" href="#" onclick="ShowREPTILES(); return false;">REPTILES</a></li>
</ul>
</div>

Ok, here is the code for the div that contains the roundabout.  It just displays a few photos.  The contents off the div, I don't believe are that relevant so I'm just going to put two here to get you the idea.

<div class="carosel" id="DOGS">
<ul>
    <li> <img alt="" src="/images/DOGS/doga.jpg" />
    <h3>Dog A</h3>
    <p>This is dog A</p>
    </li>
    <li> <img alt="" src="/images/DOGS/dogb.jpg" />
    <h3>Dog B</h3>
    <p>This is dog B</p>
    </li>
</ul>
<div class="clear"></div>
</div>

To recap, this works in everything except IE6/7.  Page loads, all 5 divs containing the roundabout are there, then get hidden with the exception of one.  When you click an animal in the menu, the jQuery function is fired off and hides all divs except the one associated with the button.  So you click FISH only the FISH div shows, click DOGS only the DOGS div shows.

Does anyone see anything in my code that would explain why IE6/7 just show all 5 divs on the screen at once, not hiding any of them even when the buttons are clicked?

One thing I wanted to point out, which may or not make a difference, is that when viewing the pages in the different browsers and viewing the source, the DIV tags appear a little different.  This is the DIV from above as rendered by the different browsers:

IE (broken, compatibility mode turned on):

<DIV id=DOGS class=carosel sizcache="4" sizset="2" jQuery1265315909258="24">

 IE (compatibility mode turned off):

<DIV id=DOGS class=carosel jQuery1265316874742="24">

 Chrome:

<div class="carosel" id="DOGS">

 Firefox:

<div class="carosel" id="DOGS">