[Last Call] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 398
  • Last Modified:

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 candjlighting.com

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.
2 Solutions
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.
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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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.
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="http://www.youtube.com/v/PYHldt9gfMw?fs=1&amp;hl=en_GB"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/PYHldt9gfMw?fs=1&amp;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

COwebmasterAuthor Commented:
that worked!, thanks!

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now