Simple JQuery animation code having issues in Safari, IE

Question

Hello,

I have some fairly simple JQuery code that works fine in Firefox, but not in IE or Safari, and since it works in Firefox I'm having trouble debugging it.

$(document).ready(function() {
 $("#ideal-clean").click(function() {
     $(this).css({'color' : 'white', 'text-decoration' : 'underline' });
     $("#ideal-attractive").css({'color' : 'black', 'text-decoration' : 'none' });
     $("#ideal-optimized").css({'color' : 'black', 'text-decoration' : 'none' });
     $("#ideal-dynamic").css({'color' : 'black', 'text-decoration' : 'none' });
     $("#ideal-detail-attractive").hide();
     $("#ideal-detail-optimized").hide();
     $("#ideal-detail-dynamic").hide();
     $("#ideal-detail-clean").show("slide", { direction: "left" }, 500);
 });

I repeat that code block four times for four different options.

I'm very new to JQuery so I'm sure I'm missing something obvious, I just don't know what! Thanks.

EDIT: Sorry, I did forget a few details. The problem is that in IE/Safari, no animation whatsoever occurs. Here is the markup that it is operating on:

<div id="ideals">
  <ul>
   <li id="ideal-clean">clean</li>
   <li id="ideal-attractive">attractive</li>
   <li id="ideal-optimized">optimized</li>
   <li id="ideal-dynamic">dynamic</li>
  </ul>
 </div>

Also, in IE/Safari, there is a large, 300px or so margin added to the top of the page that pushes everything down.