Cross-browser CSS problems

Question

The tooltips on this page (facebook, twitter etc icons) display correctly in any Firefox or IE, but do not display at all in Chrome .

The CSS looks like this:

<style>

.tooltip-fb {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: -55px; margin-top: 40px;}

.tooltip-tw {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: -5px; margin-top: 40px;}

.tooltip-tr {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: 50px; margin-top: 40px;}

.tooltip-qr {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 10px; margin-left: 49px; margin-top: 40px;} 

.tooltip-nw {display: none; position: absolute; color: #fff; background: url('<?php bloginfo('template_directory'); ?>/img/bg.png'); padding: 5px; margin-left: 166px; margin-top: 40px;}

a {position: relative;}

a:hover .tooltip-fb, a:hover .tooltip-tw, a:hover .tooltip-tr {display: block; text-align: center;}

a:hover .tooltip-nw {display: block; text-align: center;}

a:hover .tooltip-qr {display: block;}

</style>

And the markup is this:

<div style="margin-top: -170px; margin-left: 28px;">

<!-- FACEBOOK -->

<a href="https://www.facebook.com/pages/NH-Olomouc-Congress/102448499808962?ref=ts&fref=ts" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/fb.jpg" onmouseover='$(".tooltip-fb").show();' onmouseout='$(".tooltip-fb").hide();' alt="facebook"></div><div class="tooltip-fb">Sledujte nás na Facebooku!</div></a>


<!-- TWITTER -->
<a href="https://twitter.com/nholomouc" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/twit.jpg" alt="twitter" style=""></div><div class="tooltip-tw">Sledujte nás na Twitteru!</div></a>


<!-- TRIPADVISOR -->
<a href="http://www.tripadvisor.com/UserReviewEdit-g274718-d1783064-a_placetype.10023-e__2F__Hotel__5F__Review__2D__g274718__2D__d1783064__2D__Reviews__2D__NH__5F__Olomouc__5F__Congress__5F__Hotel__2D__Olomouc__5F__Olomouc__5F__Region__5F__Moravia__2E__html-NH_Olomouc_Congress_Hotel-Olomouc_Olomouc_Region_Moravia.html" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/trip.jpg" alt="tripadvisor" style=""></div><div class="tooltip-tr">Ohodnoťte náš hotel!</div></a>


<!-- QR CODE -->
<a href="#"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/qr.jpg" alt="qr code" style=""></div><div class="tooltip-qr"><center style="padding-bottom: 2px;">QR kód této stránky</center><img alt="QR kód této stránky" width="180" height="180" src="https://chart.googleapis.com/chart?cht=qr&amp;chs=250x250&amp;chl=<?php echo $pageURL;?>&amp;choe=UTF-8&amp;chld=L|1" /></div></a>


<!-- NEWSLETTER -->
<a href="http://www.algrafmedia.cz/wp/?page_id=2669" target="_blank"><div class="ikony"><img src="<?php bloginfo('template_directory'); ?>/img/news.jpg" alt="newsletter" style=""></div><div class="tooltip-nw">Odebírejte náš newsletter!</div></a>


</div>

Just a pure CSS solution to displaying the chunks of text on hover. Tried a JavaScript solution (onmouseover, onmouseout), didn't work in any browser.

How would you solve this?

Answer 1

I don't know the exact reason why it behaves like this but instead of adding margin-top: -170px simply decrease the height of the iframe by 170 ( 360 - 170 = 190 ) and remove the margin from the div

<iframe src="..." width="278" height="190" scrolling="no" frameborder="0" z-index="99"></iframe>
...
<div style="margin-left: 28px;">