1

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:developerfahaduddin@gmail.com"><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&amp;width=290&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=true&amp;appId=384169901601437" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:62px;" allowTransparency="true"></iframe> 


                </span>
                </div>
                </div>
Community
  • 1
  • 1
Foo
  • 309
  • 2
  • 5
  • 10

2 Answers2

4

When you click on the header image, the default email application is launched as you have an href to:

mailto:developerfahaduddin@gmail.com

You can check it out live in here:

http://jsfiddle.net/MSRXU/

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.

Nobita
  • 23,519
  • 11
  • 58
  • 87
1

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;
}
Nimphious
  • 4,889
  • 1
  • 17
  • 17