Forum Moderators: open
I have a flash swf file that is styled with a border. It renders great in all browsers tested except Opera. In opera, it sometimes renders ok, and sometimes the flash image seems to jump outside the border area on the right side. The sure way to repro is to load the page, then switch to another page and back. Every time you do this it will render wrong.
I've narrowed down code to the following:
[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>
<Style type="text/css">
#flashbox {
width:254px;
margin: 10px auto auto auto;
}
.flash_images_home {
float:left;
width:250px;
height:189px;
border: 2px solid red;
display:block;
}
#c_column {
width: 344px;
min-height: 359px;
float: left;
background-color: #EEF1F3;
}
#r_column {
width: 274px;
min-height: 359px;
float: left;
background-color: #D6DEE5;
border-left: 2px solid #797c81;
}
</STYLE>
<!--<script type="text/javascript" src="swfobject.js"></script>-->
</head>
<body>
<div id="c_column">
</div>
<div id="r_column">
<div id="flashbox">
<object class="flash_images_home" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="250" height="189">
<param name="movie" value="flash_photos.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="flash_photos.swf" width="250" height="189">
<!--<![endif]-->
<p>Alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</div>
</div>
</body>
</html>
[code]
Now I've found that the problem goes away if I remove c_column, and more specifically if I remove the "min-height" value for c_column. Don't get that at all. I've also tried removing the flash file and replacing it with a 250x189px solid image and the problem does not occur.
I don't see a way to attach the flash file here, so not sure how you will repro.
-Brian
The fist thing that's wrong is that the conditionals you have there are recognized only by Internet Exploder; they are proprietary tags that are only recognized by MS browsers. So there is no "<!--[if !IE]>-->".
With SWFObject, basically you have a div, paragraph, or any other ID'ed element with an image in it:
<div id="flash-holder"><img src="flash-screencap.jpg"></div>
And in a) the head of your document, b) a second external JS file, or c) right at the top of the SWFObject file you attach a window.onload() function that writes the flash to the div:
<script type="text/javascript" src="data/swfobject.js"></script>
<script type="text/javascript">
var vid = new SWFObject('images\/yourvideo.swf', 'my-vid', '330', '290', '6', '#ffffff');
vid.addParam("wmode", "transparent");
window.onload = function() {
if (document.getElementById('flash-holder')) { vid.write('flash-holder'); }
};
</script>
I know that's not what you asked, but it really is the best way I've found.
It's my first time to use swfobject. I was only following the directions of the documentation I found here regarding "How to embed Flash Player content using SWFObject static publishing"
[code.google.com...]
I commented out the swf javascript because it did not seem to make any difference in whether the problem occured or not so I was eliminating a variable. I left it commented in my code sample so that it was clear what I was trying to do in general with swfobject.
The docs seem to indicate that the conditional statements will be readable by other browsers. Could you take a look at that doc and see what you make of it?
Thanks,
-Brian
SWFObject's base markup uses the nested-objects method (with proprietary Internet Explorer conditional comments)
I Don't use conditionals, period, so spoke a step out of turn. True, any non-IE browser will ignore this:
<!--[if !IE]>-->
<!--<![endif]-->
which means, in effect, what the non IE browser will display is
<object type="application/x-shockwave-flash" data="flash_photos.swf" width="250" height="189">
However, when IE loads, it will NOT display that object tag because IE understands the proprietary conditionals. A bit of a long way around the fence there, they are making it more complicated than it has to be.
Take a blank doc, throw in the code I posted above, change it to your Flash - what happens?
PS: Scroll down the page in your link to
How to embed Flash Player content using SWFObject dynamic publishing
STEP 1: Create alternative content using standards compliant markup
And start there.
