I've just made the Poster.png appear on IE8 by extending the CSS #mainbanner width to 1020px (despite the image being 1000px) and removing the padding temporarily. However two issues still remain:
The image is now not aligned with the header and footer so I need to insert padding again plus there is a still a white box behind the .png that I simply don't want!
At least I have made some progress since waking up this morning with a fresh head!
How can I remove the white box that looks like a placeholder behind the static png on IE8?
Sorted in terms of the white box!
I had to rename the div to be #Stage in my CSS file instead of #mainbanner.
Only problem now is that IE8 now doesn't want to recognise the #Stage div and places the footer bar behind the top of the Poster.png that appears correctly. Argh!!!!!!
Will close this post and open a new one re: above issue.
I found I had to add in a style to match the background colour of my page.
In the EDGE HTML file, I added:
<body style="margin:0;padding:0; background-color:rgb(148,196,255);">
<div id="Stage" class="classname">
Found a workaround for that.
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="assets/animation/ie8.css">
<img src="assets/animation/images/poster3.png" />
in your index.html document right before you insert your Animate-Animation. The Edge-Animate Animation will insert by an iframe. So this time you set the iframe display:none !important; just for IE8. And include the alternativeposter manually.