chat box hides behind video

Posted on 2011-04-27
Last Modified: 2012-05-11
I have a chat box on my site but in IE 8 and Chrome, the chat box falls behind the home page video on smaller screen sizes. Any way to fix that? the site is

The chat box should display on top.  It seems to work in Firefox.

If your screen is large, you may not see it but shrink the window and you'll see that it floats under the video on the home page.

It's a wordpress site.
Question by:COwebmaster
    LVL 6

    Expert Comment

    Quick solution: load the flash video using an iframe.

    If this is not an applicable solution, I'll continue through the code searching for the discrepancy. Nothing obvious as of yet.

    Author Comment

    there's got to be a solution to this I'm sure.  I'll keep looking to.
    LVL 23

    Assisted Solution

    I am having a hard time testing in Chrome since it doesn't work quite right with the FireBug extension. I think you should be able to change the id of the #apexchat_invitation_container_wrapper from z-index: auto; to z-index:9999;. It is embedded in the plug-in file, but you should be able to override it if you can't find it. Just add this to the bottom of your style.css file:

    #apexchat_invitation_container_wrapper {
    z-index: 9999 !important;

    Open in new window


    Author Comment

    ok, I added that to the css file but it still falls behind that video.  Do I place a div style around that script?
    LVL 23

    Expert Comment

    You shouldn't have to. The process of using z-index requires the objects that need place to have the following css properties:

    position: relative or absolute
    z-index" 1-9999 (the higher the number the higher the stacking order).
    It can also be effected by the floats. It would take some trial and error. I would try assigning the css styles to the video wrapper and the element you want to be on-top. You could then try absolute, or relative positioning on the #apexchat element. Is that a custom plug-in? If it is standard, I can install it and try to help.
    LVL 6

    Accepted Solution

    if you alter the flash embed code to include wmode="transparent" in the <embed> attributes and also <param name="wmode" value="transparent"> within the object tags, it will allow objects to appear over the top. see the example code I have posted here to show where these settings can go, I have also attached an swfobject embedding example of adding the wmode parameter - I am sure this will do it for you.

    <object width="425" height="344">
    <param name=”wmode” value=”transparent”></param>
    <param name="movie" value=";hl=en_GB"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src=";hl=en_GB" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344" wmode=”transparent”></embed></object>

    Open in new window

    <script type="text/javascript">
    // <![CDATA[
    var so = new SWFObject("movie.swf", "sotester", "655", "500", "8", "#000000");
    so.addParam("wmode", "transparent");
    // ]]>

    Open in new window


    Author Comment

    that worked!, thanks!

    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

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
    The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
    The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

    755 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

    17 Experts available now in Live!

    Get 1:1 Help Now