I have the following CSS code, this code works great in FF and IE7 (as
expected) however IE 6 chokes on it. I think the issue is the line
that states: "position: absolute; left: 520px;". When I take that
line out IE 6 works however, the image is not positioned to my
liking... Can anyone please suggest a fix? HTML code below CSS:
#detailsHelp a {
border-bottom: 1px dashed #FEB14C;
text-decoration: none;
position: absolute; left: 520px;
}
#detailsHelp a:hover {
/* position: absolute; */
}
#detailsHelp a span {
display: none;
}
#detailsHelp a:hover span {
display: block;
position: absolute; top: 10px; left: -250px;
/* formatting only styles */
padding: 5px; margin: 10px; z-index: 100;
background: #eee; border: 1px dashed #FEB14C;
opacity: 0.9;
width: 250px;
color: #1A315F;
font-size:small;
font-weight: bold;
text-align:left;
/* end formatting */
}
HTML snippet:
<span id='detailsHelp'>
<a href='#'><img src='images/information.gif' border='0' alt='Bringing
God to your online life!'/>
<span><center>About this Page:</center><br/>
Text Goes here!<br/><br/>
Text Goes here!<br/><br/>
Text Goes here!<br/><br/>
Text Goes here!
</span>
</a>
</span>
<br/>
Thanks for any and all help!
Jeff
http://www.godsurfer.com/
