6 Replies Latest reply: Jan 6, 2012 12:52 PM by MurraySummers RSS

    Objects overlapping in Chrome (z-index issue??)

    x_defect Community Member

      I have a horizontal Spry menu that looks fine in Firefox, but I'm having problems in Chrome.

       

      http://atenndesign.com/branding-KLG.html

       

      When viewed in Chrome, the bottom of the "Print" dropdown menu gets covered up by the Flash movie file below it. I tried adding a z-index class to the Flash movie that's lower than the drop menu, but it didn't do anything.. This isn't happening in Firefox or IE so I'm not sure if the z-index is the issue? What else can I do?

        • 1. Re: Objects overlapping in Chrome (z-index issue??)
          Ben Pleysier CommunityMVP

          Try setting <param name="wmode" value="transparent" />

           

          Gramps

          • 2. Re: Objects overlapping in Chrome (z-index issue??)
            adninjastrator CommunityMVP

            Here is why gramp's suggestion is good:

            Window Mode (wmode) - What's It For?
            There are three window modes.
            Window
            Opaque
            Transparent
            By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
            In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.

            Best wishes,

            Adninjastrator

            • 3. Re: Objects overlapping in Chrome (z-index issue??)
              x_defect Community Member

              I just uploaded the updated version using the suggested code at this link - http://atenndesign.com/branding-KLG-new.html

               

              I added it below the original code:

               

              <param name="movie" value="Flash/branding-KLG.swf" />     

              <param name="quality" value="high" />

              <param name="wmode" value="transparent" />

               

              Still having the same issue though. Any thoughts?

              • 4. Re: Objects overlapping in Chrome (z-index issue??)
                adninjastrator CommunityMVP

                I never could figure out why anyone would want to use

                AC_FL_RunContent

                plus the old <object> and <embed> tags..... oh well..

                anyway, the <embed> is missing the wmode param, which is probably the problem, add to <embed.....

                wmode="transparent"

                or use a more updated <object> method and DO NOT use AC_FL or the <embed> just this single <object>

                <object data="path_to_file/file.swf" type="application/x-shockwave-flash" width="insert_width_of_movie" height="insert_height_of_movie">

                            <param name="movie" value="path_to_file/file.swf">

                            <param name="SomeOtherParam" value="ParamValue">

                </object>

                or better yet, use swfobject:

                http://code.google.com/p/swfobject/

                Best wishes,

                Adninjastrator

                • 5. Re: Objects overlapping in Chrome (z-index issue??)
                  x_defect Community Member

                  I used option 2 (<object> method) and it worked - thanks!!!

                   

                  I was using the AC_FL_RunContent since that's just what DW generates automatically when I insert a Flash movie in CS3. Is this something that's been fixed in later versions?

                  • 6. Re: Objects overlapping in Chrome (z-index issue??)
                    MurraySummers CommunityMVP

                    I was using the AC_FL_RunContent since that's just what DW generates automatically when I insert a Flash movie in CS3. Is this something that's been fixed in later versions?

                     

                    Yes.