chat box hides behind video

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.
Who is Participating?
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

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.
COwebmasterAuthor Commented:
there's got to be a solution to this I'm sure.  I'll keep looking to.
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

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

COwebmasterAuthor Commented:
ok, I added that to the css file but it still falls behind that video.  Do I place a div style around that script?
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.
COwebmasterAuthor Commented:
that worked!, thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.