Problema "tooltip" con IE 7

conetsol · #1 (**permalink**) 21/10/2010, 20:15

Hola amigos, como estan, espero me puedan dar una mano con el siguiente tema:

Tengo un "tooltip" sobre unas cajas de textos, con IE8 y con Firefox funciona correctamente, pero con IE7 el tooltip se ubica debajo del texto:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">


/* All form elements are within the definition list for this example */
dl {
	font:normal 12px/15px Arial;
    position: relative;
    width: 370px;
}
dt {
    clear: both;
    float:left;
    width: 160px;
    padding: 4px 0 2px 0;
    text-align: left;
	z-index:1;
	background-color:#F8F8F8;
}
dd {
    float: left;
    width: 200px;
    margin: 0 0 8px 0;
    padding-left: 6px;
	z-index:1;
}


/* The hint to Hide and Show */
.hint {
   	display: none;
    position: absolute;
    right: -180px;
    width: 200px;
    margin-top: -1px;
    border: 1px solid #c93;
    padding: 10px 12px;
    /* to fix IE6, I can't just declare a background-color,
    I must do a bg image, too!  So I'm duplicating the pointer.gif
    image, and positioning it so that it doesn't show up
    within the box */
    background: #ffc url(Templates/Basic/Img/pointer.gif) no-repeat -10px 5px;
		z-index:100;
}

/* The pointer image is hadded by using another span */
.hint .hint-pointer {
    position: absolute;
    left: -10px;
    top: 5px;
    width: 10px;
    height: 19px;
    background: url(Templates/Basic/Img/pointer.gif) left top no-repeat;
}
.hint1 {  display:none;
  position: absolute;
  right: -190px;
  width: 200px;
  margin-top: 0px;
  border: 1px solid #c93;
  padding-left: 5px;
  padding-top: 10px;
  padding-bottom:10px;
  background-color: #ffc;
  z-index:100;
}
</style>
<script type="text/javascript">
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

function prepareInputsForHints() {
  var inputs = document.getElementsByTagName("input");
  for (var i=0; i<inputs.length; i++){
    inputs[i].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";

    }
    inputs[i].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
  var selects = document.getElementsByTagName("select");
  for (var k=0; k<selects.length; k++){
    selects[k].onfocus = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
    }
    selects[k].onblur = function () {
      this.parentNode.getElementsByTagName("span")[0].style.display = "none";
    }
  }
}
</script>
</head>
<body>
<form id="FormStep2" name="FormStep2" method="post" action="">
<table width="759" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="13">&nbsp;</td>
    <td width="370"><dl>
      <dt><span class="style8">
        Campo 1
        </span></dt>
      <dd>
        <input
			name="ShopperName"
			type="text"
			id="ShopperName" maxlength="70"    />
        <span class="hint">Ayuda campo 1<span class="hint-pointer"></span></span> </dd>

      </dl></td>
    <td width="383" valign="top"><dl>
      <dt>Campo 2</dt>
      <dd>
        <input
			name="claveb"
			type="text"
			id="label" onkeypress="return checkIt(event)" maxlength="30" />
        <span class="hint">Ayuda campo 2<span class="hint-pointer"></span></span></dd>
      <div align="left" ></div>
      
      
      </dl><div id="DivElectron"></div></td>
  </tr>
</table>
</form>
</body>
</html>
<script>

prepareInputsForHints();
</script>

Mil gracias.