W
wilsos6
Hello,
I'm using the following code to display CSS tooltips over a couple of
images. The code is based on the example posted at http://lixlpixel.org/css_tooltip/
and on a few similar sites.
The code works fine on Firefox, but on IE, the tooltip displayed when
you hover over 'image1' is beneath 'image2'. Any suggests on how I can
make both tooltips hover above the images would be greatly
appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html>
<head>
<style type="text/css">
a.tip{
text-decoration:none;
background:transparent;
position:relative;
display:block;
}
a.tip span{display: none; }
a.tip:hover span{
display:block;
position:absolute;
top: 10px;
left: -10px;
width: 50px;
height: 40px;
padding: 5px;
BACKGROUND: #FFFFFF;
color: #000000;
border-width: 1px 1px 1px 1px;
border-style: solid;
FONT-FAMILY: arial;
FONT-SIZE: 11px;
-moz-border-radius: 5px; /* FF */
-webkit-border-radius: 5px; /* Safari */
z-index:25;
}
</style>
</head>
<body>
<div id="test" style="position : relative ;">
</html>
</body>
Thank you,
Stuart
I'm using the following code to display CSS tooltips over a couple of
images. The code is based on the example posted at http://lixlpixel.org/css_tooltip/
and on a few similar sites.
The code works fine on Firefox, but on IE, the tooltip displayed when
you hover over 'image1' is beneath 'image2'. Any suggests on how I can
make both tooltips hover above the images would be greatly
appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html>
<head>
<style type="text/css">
a.tip{
text-decoration:none;
background:transparent;
position:relative;
display:block;
}
a.tip span{display: none; }
a.tip:hover span{
display:block;
position:absolute;
top: 10px;
left: -10px;
width: 50px;
height: 40px;
padding: 5px;
BACKGROUND: #FFFFFF;
color: #000000;
border-width: 1px 1px 1px 1px;
border-style: solid;
FONT-FAMILY: arial;
FONT-SIZE: 11px;
-moz-border-radius: 5px; /* FF */
-webkit-border-radius: 5px; /* Safari */
z-index:25;
}
</style>
</head>
<body>
<div id="test" style="position : relative ;">
said:
</div>said:
</html>
</body>
Thank you,
Stuart