1

I have this strange issue going on with my CSS on my site, and I'm hoping someone can help me out. I have a sharer box to the left of each of my posts. When you click the box to share (for instance the twitter box) the pop up box goes behind the post content, instead of in front of it. Anyone have any ideas on how to fix this? To see it for yourself, visit one of the posts and try to click on the google plus, or facebook like button (don't worry, it won't actually share unless you confirm it) You can view one of the posts to see what's going on here ---> http://noahsdad.com/child-down-syndrome-friend/ J

Thanks.

Here are a few screen shots of what is going on d.pr/ZCPy and http://d.pr/ax6H

Rick Smith
  • 1,245
  • 3
  • 15
  • 22
  • I don't get that issue in chrome, IE or FF. What browser are you using? (also are you logged in, in 'edit' mode or something? If so, try logging out and testing it) – mbx-mbx Mar 09 '12 at 15:34
  • Doesn't happen in Safari either. –  Mar 09 '12 at 15:38
  • Strange, I'm actually in Safari, and I'm getting the issue. Here are a few screen shots: http://d.pr/ZCPy and http://d.pr/ax6H. It actually looks like the facebook box is getting squashed in its own little box, and the gplus box is going behind the content area. You guys aren't getting that? – Rick Smith Mar 09 '12 at 15:42
  • What version of safari are you using. Doesn't happen for me (v5.0.4) – mbx-mbx Mar 09 '12 at 15:48
  • Definitely not happening to me either (5.0.5) –  Mar 09 '12 at 15:49
  • I'm using 5.1.3 on Safari. Also that screen shot was taken on Chrome (where it is also happening.) – Rick Smith Mar 09 '12 at 15:49
  • Can you guys try on chrome? I'm getting this on chrome also. I'm running version 17.0.963.78 – Rick Smith Mar 09 '12 at 15:51
  • Chrome is good for me too (17.0.963.56 m). Might be some dodgy css cached, try clearing cache etc. and do a hard refresh (ctrl f5) – mbx-mbx Mar 09 '12 at 15:53
  • This is strange. So I just tried the plus 1 on safari and it's not happening (I can't test the facebook like button, since I've already 'liked' it). But on Chrome it still is happening. Strange. has anyone tried the Facebook like box on Safari? Is it working? What about on Chrome? – Rick Smith Mar 09 '12 at 15:54
  • I did the hard reset, and it still seems to be doing it. What's strange is if I scroll down it solves the issue, but when the the post is scrolled to the very top, the google box goes behind the youtube video. No one else can confirm this? This is wacky... – Rick Smith Mar 09 '12 at 16:01
  • Yep, works fine for me http://d.pr/xm03 – mbx-mbx Mar 09 '12 at 16:02
  • You on a mac btw? I'm on windows so not sure if that has any bearing. (shouldnt do) – mbx-mbx Mar 09 '12 at 16:05
  • Yelp, I'm on a mac. And I'm still getting the issue. Very strange. Also I tried to making the Z-index:99999 instead of what it was 9999 and it made no difference. Should I leave it as 99999 or change it back to the default 9999? (Not really what that does.) – Rick Smith Mar 09 '12 at 16:28

2 Answers2

1

Try with z-index:99999; on pop up box.

BurebistaRuler
  • 6,209
  • 11
  • 48
  • 66
  • The z-index was 9999 already, I added the extra 9 as you suggested, and the issue is still happening. Very strange. – Rick Smith Mar 09 '12 at 15:46
  • hmmmm,is very weird! I tested a little bit on ff,chrome and IE9 and the html pop-up is displayed on front. However, I think will look more nicely if you will use a modal pop-up window instead of simple html pop-up. check this: http://okonet.ru/projects/modalbox/index.html – BurebistaRuler Mar 09 '12 at 18:13
  • Just wanted to let everyone know that I've had others test it here locally, and it seems to be doing the same thing when viewed on Chrome. It looks like this may be what's happening. Thoughts?http://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe – Rick Smith Mar 09 '12 at 18:51
  • Thanks for sharing the link. You'll have to forgive my noob-ness, but what is a modal pop-up box? How would you go about doing something like that with a plug in? (I'm using the digg digg social media plug in) – Rick Smith Mar 09 '12 at 18:53
  • 1
    What is a modal window: http://www.smashingmagazine.com/2009/05/27/modal-windows-in-modern-web-design/ Simple modal window using javascript: http://javascript.about.com/library/blmodal.htm jQuery modal window: http://jquery.malsup.com/block/#demos I'll try to create a test page and to give you a live demo with social share modal links. – BurebistaRuler Mar 10 '12 at 07:54
0

For the video shown in the post, add wmode="opaque" to the <object> / <embed> tag.

yas
  • 3,520
  • 4
  • 25
  • 38
  • but it isn't just this post. It's happening on every post. But since posting the question I guess the better question is why can't anyone else duplicate the problem? Can you? – Rick Smith Mar 09 '12 at 16:47