Topic: tooltip style popup (Page 1 of 1) |
|
|---|---|
|
Nervous Wreck (II) Inmate From: Perth, Western Austrlia |
posted 07-28-2005 10:36
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.... 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>
|
|
Bipolar (III) Inmate From: Minnesota |
posted 07-28-2005 16:39
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> |
|
Nervous Wreck (II) Inmate From: Perth, Western Austrlia |
posted 07-29-2005 05:53
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, |
- Copyright ©1994-2024 by Doctor Thaddeus Ozone, all rights reserved. -
- Grail copyright ©2000-2024 by Tyberius Prime, all rights reserved. -
Debug: This page needed 0.00821304 seconds to process.
