Topic: tooltip style popup Pages that link to <a href="https://ozoneasylum.com/backlink?for=26341" title="Pages that link to Topic: tooltip style popup" rel="nofollow" >Topic: tooltip style popup\
 
Author Thread
iconian
Nervous Wreck (II) Inmate

From: Perth, Western Austrlia
Insane since: Oct 2004

 IP logged posted posted 07-28-2005 10:36 Edit Quote

been trying to get this to work in conjunction with a css dropshadow and now have it working in mozilla but not IE i cant figure out what is wrong below is the code, and you can see this at http://art.iconiancds.com/pissed.html eventually this will be incorporated into a PHP gallery but i need to get it working first....

any and all help appreciated.....

Matthew

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<style type="text/css">
.dropshadow1{
	float:left;
	clear:left;
	position:relative;
	background: url(./shadow.gif) no-repeat bottom right !important;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
}
.dropshadow1 div {
    background: url(./fake_offset.png) no-repeat left top !important;
    background: url(./fake_offset.gif) no-repeat left top;
    padding: 0px 5px 1px 0px;
}
.dropshadow1 img{
	position:relative;
	bottom:6px;
	right: 6px;
	border: 1px solid #999999;
	padding:10px;
	font-size:14px;
	margin: 0px;
	z-index:auto;
}

.dropshadow1 a:hover img{
	margin-right: -4px;
}

.dropshadow1 a span {
	display:none;
	}

.dropshadow1 a:hover span {
    background-color:#FFF;
    display:block;
    position:absolute;
    z-index: 1000;
    width: 120px;
    bottom: 30px !important;
    bottom: 30px;    
    left: 50%; margin-left: -64px; 
    border:1px solid #a9a9a9;
    text-align: center;
    font-size: 12px;
    color:#333;
    opacity: 0.85;
}</style>
<body>


<div class="dropshadow1"><div>
<a href="#"><img src="aliances.gif">
<span>fjdslkfjdlksajfdlksa</span></a>
</div></div>


</body>
</html>



matthew@iconiansolutions.com
www.iconiansolutions.com

Edit Tyberius Prime: Helpfully fixing your link.

(Edited by Tyberius Prime on 07-28-2005 11:47)
Nathus
Bipolar (III) Inmate

From: Minnesota
Insane since: Aug 2003

 IP logged posted posted 07-28-2005 16:39 Edit Quote

After playing with it a bit, I got it to work with the following code.

code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>
<style type="text/css">
.dropshadow1{
	float:left;
	clear:left;
	background: url(./shadow.gif) no-repeat bottom right !important;
	margin: 10px 0 10px 10px !important;
	margin: 10px 0 10px 5px;
}
.dropshadow1 div {
    background: url(./fake_offset.png) no-repeat left top !important;
    background: url(./fake_offset.gif) no-repeat left top;
    padding: 0px 5px 1px 0px;
    position:relative;
}
.dropshadow1 img{
	border: 1px solid #999999;
	padding:10px;
	font-size:14px;
	margin: 6px;
	z-index:auto;
}
.dropshadow1 a:hover img{
	margin-right: -4px;
}
.dropshadow1 a:hover {
	display:block;
}
.dropshadow1 a:link span, .dropshadow1 a:visited span {
	display:none;
  position:absolute;
  width:120px;
  bottom:30px;
  left:50%;
  margin-left:-64px;
  border:1px solid #a9a9a9;
  text-align: center;
  font-size: 12px;
  color:#333;
  opacity: 0.85;
  background-color:#FFF;
}
  
.dropshadow1 a:hover span {
    display:block;
}
</style>
<body>


<div class="dropshadow1">
	<div>
		<a href="http://www.moocow.com">
    	<span>fjdslkfjdlksajfdlksa</span>
      <img src="aliances.gif" width="120" height="120" />
    </a>
  </div>
</div>


</body>
</html>
iconian
Nervous Wreck (II) Inmate

From: Perth, Western Austrlia
Insane since: Oct 2004

 IP logged posted posted 07-29-2005 05:53 Edit Quote

Thanks Nathus, I managed to get it working about the same time you did, i used a font-size:100% instead of the display:block,
tou can see the semi-final result http://art.iconiancds.com. I have another question though, all my images are float:left so they all sit together side by side how do i get them to center inside a container?

Matthew

matthew@iconiansolutions.com
www.iconiansolutions.com


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu