I am making a Raphael JS animation, and for some reason, I cannot get images to render in internet explorer 9. here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link type="text/css" rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="scripts/raphael-min.js"></script>
<script type="text/javascript" src="scripts/jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var layer0 = Raphael("layer0", 980, 650);
var bg = layer0.image("images/landscape_background.jpg", 0, 0, aniWidth, aniHeight);
});
</script>
</head>
<body>
<div class="layer" id="layer0">
</div>
<div class="layer" id="layer1">
</div>
<div class="layer" id="layer2">
</div>
<div class="layer" id="layer3">
</div>
<div class="layer" id="layer4">
</div>
</body>
</html>
It works fine in chrome and firefox, just not ie 9.
You need to put the Raphael Initiator Function around the raphael code to make it work. Eg.
raphael(function(){