Problem aligning flash .swf in the header.

[tallone]

Hi

I'm trying to replace the bg_header.jpg , in the GAIA template, with an .swf flash.
In order to do it, I'm replacing the following line in the index.php

<a href="index.php" title="Home"><img src="<?php echo $mosConfig_live_site; ?>/templates/gaia/images/logo.jpg" alt="Home" border="0" align="top" /></a>

    
with

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="970" height="88" id="myflash" align="left">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="myflash.swf" /><param name="quality" value="high" /><param name="scale" value="exactfit" /><param name="salign" value="lt" /><param name="bgcolor" value="#339900" /><embed src="myflash.swf" quality="high" scale="exactfit" salign="lt" bgcolor="#339900" width="970" height="88" name="myflash" align="left" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

I've placed the myflash.swf in the root directory only for testing purposes.
The flash appears in the header but it is not aligned with the container no matter how much I try to edit the #logo id in the template_css.css
There is also big difference between IE and Firefox. Cannot fix it for either the IE or Firefox.
Is the problem in the template_css.css or in the index.php? Is it necessary to make changes on both the files?

Any help would be appreciated
                      Thanks

[Ivan Trebješanin]

Hi tallone,

Please, give us some more info on your problem... We can't know what's in your head 
How would you like your flash to be aligned? All I see is that flash movie is now set to align="left"...

Additional comment
Your problem is related to visual appearence, so it cannot be solved without some visual description of what do you want and what is the current situation.

[Farhad Sakhaei]

Hi tallone  ,
i confronted with this problem , there is a problem with DIV tags in these matters ,
change your div of logo with a table :

your DIV will be :

Code: [Select]

<table cellspacing="0" cellpadding="0" id="logo">
      <tr>
           <td>
<a href="index.php" title="Home"><img src="<?php echo $mosConfig_live_site; ?>/templates/gaia/images/logo.jpg" alt="Home" border="0" align="top" /></a>
          </td>
      </tr>
</table>

change the linked picture with your flash code , also correct the height value of #logo in template_css.css , remove background ...


#logo {
   position:relative;
   width:100%;
   height:88px;
   float:left;
   background:#FFFFFF url(../images/bg_header.jpg) no-repeat left top;
}


now check your site ... 

[tallone]

Finally.

Sorry for the poor description but is quite difficult to make one for this particular problem without the aid of screen-shoots.
Basically I wanted to replace the logo.jpg and bg_header.jpg with an .swf of the same dimensions.

I tried Farhad's solution but no luck.

I think the problem is with the options inside the <object> tags such as <param name="scale" value="exactfit" /><param name="salign" value="lt" /> which causes the IE and Firefox to present the .swf out of place. 

I removed all the "unnecessary" options from the <object> and replaced

<div id="logo">
<a href="index.php" title="Home"><img src="<?php echo $mosConfig_live_site; ?>/templates/gaia/images/logo.jpg" alt="Home" border="0" align="top" /></a>
</div>

with

<div id="logo">
<object width="970" height="86">
<param name="movie" value="myflash.swf">
<embed src="myflash.swf" bgcolor="#339900" width="970" height="86">
</embed>
</object>
</div>

It now works fine for IE and Firefox and it works with either the <div> or the <table>

Do you think that this could have been the problem or it just worked by a lucky coincidence?

Thanks for the the immediate response.

[Farhad Sakhaei]

this is a true format :

<object classid="clsid:D27CDB6E-AE6D-11CF-96B8-444553540000" id="obj1" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" style="width: 780px; height: 203px">
       <param name="movie" value="<?php echo $mosConfig_live_site; ?>/templates/template_name/images/flash.swf"/>
       <param name="quality" value="Best"/>
       <param name="menu" value="false"/>
       <embed src="<?php echo $mosConfig_live_site; ?>/templates/template_name/images/flash.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" quality="Best" menu="false" style="width: 780px; height: 203px"/>
</object>

important values are marked with red color !

[tallone]

Thanks a lot I'll use this format

[CREATIVE Options]

For valid XHTML code use the next code:

Code: [Select]

<object type="application/x-shockwave-flash"
data="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $mainframe->getTemplate(); ?>/movie.swf"
width="400" height="300">
<param name="movie"
value="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $mainframe->getTemplate(); ?>/movie.swf" />
</object>
And for Alternative Content use:

Code: [Select]

<object type="application/x-shockwave-flash
data="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $mainframe->getTemplate(); ?>/movie.swf"
width="400" height="300">
<param name="movie"
value="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $mainframe->getTemplate(); ?>/movie.swf" />
<img src="<?php echo $mosConfig_live_site; ?>/templates/<?php echo $mainframe->getTemplate(); ?>/noflash.gif"
width="200" height="100" alt="" />
</object>
PS: It works fine to FF, IE7, IE6, & OPERA

[datahell]

I think the only way to enter valid cross-browser XHTML code for flash is through javascript...

[Farhad Sakhaei]

How ?

[datahell]

Using the document.write.

For example:
<script type="text/javascript">
<!--
document.write('<object .....>mpla mpla mpla</object>');
//-->
</script>
<noscript>You must enable javascript to see the flash movie!</noscript>


Anything you write inside javascript, even xhtml invalid, will not affect your site validity as the javascript is only executed by the client's browser.

Tip 1: If visitor has disabled javascript then you can use the <noscript> html tag to display an alternative image with the same dimensions as the flash object.
Tip 2: Using the same technique you can enter more problematic code like css inside the body tag. But always try to use the usual xhtml compliant way and only use javascript if it is absolutely necessary. Test your code with all major browsers to be sure it will run fine for all visitors.

[Farhad Sakhaei]

Interesting , Thank you John