Reputation: 319
I have the following code in the head section of my website. I have read this question but my css does not seem to have a z-index.The image and the like box display but nothing happens when I click them or I should say that the hyperlinks do not work. Please help out. Thanks
<div class="content-pad" style="float:left;">
<a href="mailto:[email protected]"><img src="http://www.startupsandfinance.com/wp-content/uploads/2012/06/Advertise-here-728x90.png" width="728" height="90" /></a>
<span class="widget-pad" style="margin-left:25px;">
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FStartupAndFinance&width=290&height=62&colorscheme=light&show_faces=false&border_color&stream=false&header=true&appId=384169901601437" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:62px;" allowTransparency="true"></iframe>
</span>
</div>
</div>
Upvotes: 1
Views: 109
Reputation: 5039
The problem is that .content
has no height, and pointer events are not reaching the iframe because it is outside of it's parent element's boundaries.
Adding this rule to whatever else you have for your .content
selector.
div.content {
height: 120px;
}
Upvotes: 1
Reputation: 23713
When you click on the header image, the default email application is launched as you have an href to:
mailto:[email protected]
You can check it out live in here:
So, is something else that you haven't write the code for.
After looking at your page with Firebug, I see something else is messed up. If you add some height to:
<div class="content">
...
</div>
You will be fine, and the image will be clickable.
Upvotes: 4