Position a Flash object using CSS to get reliable positioning

Posted on 2007-07-25
Last Modified: 2010-08-05
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:

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.

Question by:opalcomp
    LVL 30

    Assisted Solution

    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=",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="" 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"/>  


    and then in your CSS:

    index_flash.cfm (line 37)

    #Layer1 {
    LVL 1

    Author Comment

    I believe I did what you indicated.  The result can be seen in:

    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.
    LVL 1

    Author Comment

    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.
    LVL 1

    Accepted Solution

    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:

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    The goal of the tutorial is to teach the user how to select the video input device. Make sure you have an input device that in connected and work and recognized by Adobe Flash Media Live Encoder and select it in the “video input” menu.
    The goal of the tutorial is to teach the user how to use the auto adjust feature and what the different options do. When your video is not working right you can choose the auto adjust feature to help choose your settings.

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now