Hello Ninja,
I have problems with my jQuery script on Opera and IE 9.
If you look at the following code, the title is suppose
to animate in front of the images. In Opera and IE10,
the title animates on the right of the image.
Any ideas will be appreciated!
Thanks 
=====================================================
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS + JQuery</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
width:400px;
margin:0 auto;
text-align:left;
}
box {
position:relative;
width:400px;
height:400px;
background-color:#fff;
background-image:url(box.png);
/*overflow:hidden;*/
}
box .title {
position:absolute;
top:400px;
width:400px;
height:50px;
background-color:#000;
zoom: 1;
filter: alpha(opacity=75);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.75;
}
box .title p {
padding:10px 0 10px 10px;
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
color:#fff;
}
a:link, a:active, a:hover, a:visited {
text-decoration:none;
}
img {
border:0
}
</style>
<script src="../../lib/jquery-1.4.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').hide();
$('#box').hover(function() {
$('.title').animate({top: '-=50px'}, 200);
$('img').fadeIn(200);
}, function() {
$('.title').animate({top: '+=50px'}, 200);
$('img').fadeOut(200);
});
});
</script>
</head>
<body>
<a href="#">
<div id="box">
<img src="box_h.png">
<span class="title"><p>This is a title</p></span>
</div>
</a>
</body>
</html>
