Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4964
  • Last Modified:

Position a Flash object using CSS to get reliable positioning

I am trying to position a Flash "movie" on an HTML page, and the issue is how to position the Flash object reliably.  You can see a sample link here: http://www.planetthoughts.org/index_flash.cfm

If I try CSS position:absolute, the Flash object will be in a fixed position but the right-hand column where it is supposed to appear is not totally stable in position.

If I try CSS position:relative, the Flash obect will show inside the <td> tags, but because of the leaf motion will stretch the <td> area too much.

Is there a solution that will position, say, the lower left corner of the Flash object at precisly the lower left corner of the containing <td> tag, and that will also allow the upper portion of the Flash to be layered so that the moving leaf can pass over the page heading on the way to where it stops?  This solution would be perfect since it would deal with slight changes in HTML page width, and would allow the leaf to float down over the existing page.

TIA.
0
David
Asked:
David
  • 3
2 Solutions
 
VirusMinusCommented:
try this (note the position relative for the containing td):

<td align="center" style="position:relative;">
      <span style="font-size: 9pt; line-height: 16px;">        </span>

<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->

<div id="Layer1">
  <object width="300" height="400" align="right" id="PTStoreLogo" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
    <param value="sameDomain" name="allowScriptAccess"/>
    <param value="images/store/Flash/PTStoreLogo_red.swf" name="movie"/>
    <param value="false" name="menu"/>
    <param value="autohigh" name="quality"/>
    <param value="noscale" name="scale"/>
    <param value="rb" name="salign"/>
    <param value="transparent" name="wmode"/>
    <param value="#ffffff" name="bgcolor"/>
    <embed width="300" height="400" align="right" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" allowscriptaccess="sameDomain" name="PTStoreLogo" bgcolor="#ffffff" wmode="transparent" salign="rb" scale="noscale" quality="autohigh" menu="false" src="images/store/Flash/PTStoreLogo_red.swf"/>  
</object>
</div>


</td>


and then in your CSS:

index_flash.cfm (line 37)

#Layer1 {
height:115px;
position:absolute;
left:0;
bottom:0;
width:200px;
z-index:10;
}
0
 
DavidInsight and Energy SpecialistAuthor Commented:
I believe I did what you indicated.  The result can be seen in:

     http://www.planetthoughts.org/index_flash2.cfm

Note that the result that shows is quite different for Firefox and for Internet Explorer.  The Flash object in not being contained in the <td> tag, either... perhaps there is a small further change in positioning method needed?  TIA.
0
 
DavidInsight and Energy SpecialistAuthor Commented:
A colleague recommended to me that I try a negative margin setting, but keep the relative positioning for the layer (not for the <td>.  I will be trying it this weekend and will post the result.
0
 
DavidInsight and Energy SpecialistAuthor Commented:
I was able to get positioning to work on Firefox using negative margins, and had to do some additional adjustments to get it working using IE 7 - not sure why the relative position was being ignored!  But anyway, that appears to work.  The problem is now Safari on Mac (the Flash positioning is fine on Safari beta on Windows).  Any idea how to clean up that CSS and make it work on Safari/Mac?  The URL to look at is:

http://www.PlanetThoughts.org/nIndex2.cfm
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now