#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    26
    Rep Power
    0

    Flash and Fixed images?


    Hey Guys.

    I'm working on a tumblr theme at current and they have what is called a audio post, which ad's a flash movie that plays a sound.

    I'm having trouble as I've got a fixed header that the posts go under as the user scrolls the page, which works fine with youtube videos.

    However the audio post is going ontop of my banner/logo.

    Code:
    #banner { width:637px; height:150px; margin-left:10px; background-color:#141414; background-repeat: no-repeat; position:fixed; z-index:1000; } .logo { margin-top:40px; z-index:1000; position:fixed; } .audio_player { z-index:-1000; position:static; }

    Code:
    <span id="audio_player_11436410709"> <div class="audio_player"> <embed type="application/x-shockwave-flash" src="http://assets.tumblr.com/swf/audio_player_black.swf?audio_file=http://www.tumblr.com/audio_file/11436410709/tumblr_lt297nLjGa1r4fuce&amp;color=FFFFFF" height="27" width="207" quality="best"></div></span>
    The embed is dynamically generated by tumblr so there is no way I can change it from embed.

    Has anyone else had this problem or know a solution? As Z-index seems to be getting ignored :S
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    721
    Rep Power
    446
    By default, Flash files are placed on top of everything else. To get them to obey the normal z-index rules, you have to set the window mode "wmode" attribute to either transparent or opaque (opaque is better for performance).

    Typically you would change that on the embed code itself, but if you don't have access to that you may be able to change it dynamically via Javascript.

    More info on wmode: http://kb2.adobe.com/cps/127/tn_12701.html

    Comments on this post

    • Kravvitz agrees
    Last edited by Kravvitz; November 1st, 2011 at 11:50 PM. Reason: made the URL into a link

IMN logo majestic logo threadwatch logo seochat tools logo