CSS IE6 issue..
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/>
Test Case A: (Works in all browsers but the Information Button isn't
properly placed)
http://www.godsurfer.com/addStory.php
Test Case B: (Works in FF and IE 7 only - Information Button is placed
correctly)
http://www.godsurfer.com/details.php?id=221
Doc Type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Thanks for any and all help!
CSS Codes
Reply With Quote
Bookmarks