For my job, I am creating rich media ads and they were displaying correctly in all browsers until I started experimenting with the jQuery css method. Now, nothing is showing up in IE, which wasn't an issue yesterday during my meeting. I suspect that IE may handle css differently from other browsers. Any help or suggestions would be greatly appreciated, so here is a snippet of my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Molson Canadian Ad Template</title>
<style type="text/css">
body {
background-color: #333;
}
</style>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script src="jquery.swfobject.1-1-1.min.js" type="text/javascript"></script>
<script>
$(document).ready(
function() {
jsReady = true;
banner1 = $('#banner1');
banner1.css({overflow:'hidden', position:'absolute', left:158});
banner1.flash({swf: 'molson1_300x250.swf', width: 300, height: 250, play: true, flashvars: {message:'in'}});
}
);
var jsReady = false;
function isReady() {
return jsReady;
}
function sendToJavaScript(value) {
if( value == "expand" ){
banner1.css('left', 0 );
banner1.flash().remove();
banner1.flash({swf:'molson1_600x250.swf', width:600, height:250, wmode:"transparent"});
}else{
banner1.css('left', 158 );
banner1.flash().remove();
banner1.flash({swf: 'molson1_300x250.swf',width: 300,height: 250,play: true},function(){this.GotoFrame(71)});
}
}
</script>
</head>
<body>
<div id="banner1"></div>
</body>
</html>