How to Style Pop Out Over links?

[danabrunetti 0]

Looking for a way in CSS (base.css) to make a pop out from one div display over another, without blocking the links in the lower div when the pop-out is closed. I am trying to use the Facebook Like Button with the comment pop-out on the pages of my site (triggla.tv) and have made the .widget-pad area of my section appropriately sized to display it when it pops up, so that it goes over another section and div that is containing a large image that links to another page. However, when the Like button is unclicked and the pop-up is not displayed the linked area (silver part in this pick) is not-clickable. The area below where the transparant div from the Like Button is still clickable. How to make it so I can still click the links below where a popout happens on my page?

[catrina 103]

The silver/metal-looking part isn't clickable at all (even before I click on the "Like" button). Perhaps you need to make the widget-pad area smaller in height.

[danabrunetti 0]

@Catrina

The silver/metal-looking part isn't clickable at all (even before I click on the "Like" button). Perhaps you need to make the widget-pad area smaller in height.

I have done that, and you are correct that this makes the silver area a link again. Unfortunately the side effect is that the "Comment" pop out box then becomes cut off. You can see this in the screen below. So that's where we've really gotten stuck here.

[kastelic 6]

You could add this rule:

	.widget{overflow: visible}
	

But that might affect other elements with the class 'widget' in a bad way so if you have problems you could try:

	#text-13{overflow:visible}
	

[danabrunetti 0]

@Jimmy This did the trick, thanks! I create new widgit-ized sections for everything, so I found that this did the trick and prevented any conflicts from interacting with other widgets (in base.css). ("share" is the section I created) `#share .widget{overflow: visible}`