[jQuery] Effects/show callback in Internet Explorer

[jQuery] Effects/show callback in Internet Explorer

Hello,
I am new to jQuery and over all web development.
I recently created a site using jQuery Effects/show
callback
function, with a very basic show/hide effect.
$
"button"
.click
function
{
$
"p"
.show
"slow"
;
}
;
However, it works fine in Safari and Firefox, but does not work at all
in Internet Explorer, even the latest version 8. Since I am very much
an amateur, I probably did something very obviously wrong...
I think it's the way I tagged "bio2" with out a class or id, but I've
tried different ways to go about it and it doesn't seem to work even
on Safari or Firefox if I change anything.
I've included my basic code below along with the link to the actual
site, in hopes that someone has a suggestion for me.
Any help or advice is greatly appreciated!
P.S. I downloaded jquery_latest.js and compressed it. It's labled
"jquery_latest.comp.js and linked as a separate file.
link to site: http://www.leylamccalla.com
Firefox
Safari is how I would like it to work
Code:
---------------------------------------------------------------------------
<head>
<script src="Scripts/jquery_latest_comp.js"></script>
<script>
$
document
.ready
function
{
$
"bio"
.click
function
{$
"bio2"
.show
1500
;
}
;
}
;
$
document
.ready
function
{
$
"clo"
.click
function
{$
"bio2"
.hide
400
;
}
;
}
;
</script>
<style>
#bio {position: absolute;
width:115px;
left: 110px;
top: 63px;
text-align: center;
cursor:pointer;
z-index:2;}
bio2 {background-image:url
images/bio_back.jpg
;
background-repeat:no-repeat;
width:805px;
height:504px;
position:absolute;}
clo {position:absolute;
width:20px;
height:20px;
left:750px;
top:450px;
z-index:2;
color:#063;
cursor:pointer;}
.content {position:absolute;
left:0px;
top: 135px;
display:none;}
</style>
</head>
<body>
<div id="bio">
<bio>
<a onClick="document.getElementById
'bio'
.style.color='#999999';>
bio
</a>
</bio>
</div>
<bio2 style="display: none" class="content">

TEXT HERE


<clo><a onClick="document.getElementById
'bio'
.style.color='#000';">X</a></clo>
</bio2>
</body>
Thanks so much!