No replies
The Intellects
The Intellects's picture
Offline
newbie
Canada
Last seen: 8 years 19 weeks ago
Canada
Timezone: GMT-8
Joined: 2011-11-28
Posts: 10
Points: 14

Hi,

I'm having some issues trying to get some anchored images with tooltips to show up properly in Firefox and IE. It is working fine in Chrome.

Here's the code:

<html>
<head>
<style>
  html, body {
    background-color: white;
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
  }
 
  #contentFrame {
    width: 100%;
    min-height: 90%;
    margin: 0;
    padding: 0;
    border: 0;
    border-style: none;
  }
 
  .customcontent {
    width: 100%;
    text-align:center;
    overflow:hidden;
    background-color: #BCC8DA;
    height: 10%;
  }
 
  .icons {
    display: inline-block;
    *display: inline;  
    height: auto !important;
    height: 100%;
    margin: 0 1%;
  }
 
  .icons img {
    height: 100%;
    width: auto;
    border: 0;
  }
 
  .tooltip {
    position: relative;
    display: inline-block;
    *display: inline;
    text-decoration: none;
    color: #000;
    outline: none;
  }
 
  .tooltip span {
    visibility: hidden;
    position: absolute;
    text-align: left;
    font-size: 12px;
    font-family: Tahoma;
    top: 0px;
    z-index: 999;
    width: 150px;
    padding: 5px;
    border: 1px solid gray;
    background-color: #BCC8DA;
    background-image: -webkit-linear-gradient(rgba(255,255,255,<img src="https://www.csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />, rgba(255,255,255,0.5));
    background-image: -moz-linear-gradient(rgba(255,255,255,<img src="https://www.csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />, rgba(255,255,255,0.5));
    background-image: -ms-linear-gradient(rgba(255,255,255,.<img src="https://www.csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />, rgba(255,255,255,0.5));
    background-image: -o-linear-gradient(rgba(255,255,255,.<img src="https://www.csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />, rgba(255,255,255,0.5));
    background-image: linear-gradient(rgba(255,255,255,.<img src="https://www.csscreator.com/sites/all/modules/smileys/packs/Roving/innocent.png" title="Innocent" alt="Innocent" class="smiley-content" />, rgba(255,255,255,0.5));
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
  }
 
  .tooltip:hover {
    border: 0; /* IE6 fix */
  }
 
  .tooltip:hover span {
    visibility: visible;
  	z-index: 999;
  }
</style>
</head>
<body>
<iframe id="contentFrame" height="90%" src="" role="presentation" tabindex="-1" frameborder="0"></iframe>
<div class="customcontent">
  <div class="icons">
    <a class="tooltip" href="#">
      <img src="http://jayhuang.org/STORAGE/adw.png" alt="ADW" title="Using title fixes the iframe issue..."/>
      <span>Content here.</span>
    </a>
  </div>
  <div class="icons">
    <a class="tooltip" href="#">
      <img src="http://jayhuang.org/STORAGE/adw.png" alt="ADW"/>
      <span>The browser won't let this tooltip go over the iframe because of security issues...</span>
    </a>
  </div>
  <div class="icons">
    <a class="tooltip" href="http://google.com" target="_blank">
      <img src="http://jayhuang.org/STORAGE/adw.png" alt="ADW"/>
      <span>Content here. Here is more content, and more...</span>
    </a>
  </div>
</div>
</body>
</html>

What am I doing wrong?