Bookmarks

Yahoo Gmail Google Facebook Delicious Twitter Reddit Stumpleupon Myspace Digg

Search queries

sqldatasource dal, wwwxxxenden, convert raid5 to raid 10 mdadm, apache force chunked, nrao wwwxxx, xxxxxdup, procmail change subject header, wwwXxx not20, Wwwxxx.doks sas, linux raid resync after reboot

Links

XODOX
Impressum

#1: CSS tooltip

Posted on 2008-04-22 00:11:26 by 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 ;">
<div style="position:absolute;left: 0px ; top : 0px;"><a
href="http://www.google.com" class="tip"><img src="image1.jpg"/
><span>This is a tooltip</span></a></div>
<div style="position:absolute; left: 40px ; top : 0px;"><a
href="http://www.google.com" class="tip"><img src="image2.jpg"/
><span>This is another tooltip</span></a></div>
</div>
</html>
</body>


Thank you,
Stuart

Report this message

#2: Re: CSS tooltip

Posted on 2008-04-22 01:15:56 by John Hosking

wilsos6@hotmail.co.uk wrote:
>
> 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.

No URL of your own?

>
> 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.
>

The simplicity, brevity, reliability, and validity of this code (below)
is not worth the loss of background colors and (in some browsers)
rounded corners on your tooltips?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tooltips: to style or not to style</title>
<style type="text/css">
#test { position:relative; }
#searchlink1 { position:absolute; left:0px; top:0px; }
#searchlink2 { position:absolute; left:40px; top:0px; }
</style>
</head>
<body>
<div id="test">
<div id="searchlink1">
<a href="http://www.google.com/">
<img src="image1.jpg" alt="This is a tooltip"
title="This is a tooltip">>
</a>
</div>
<div id="searchlink2">
<a href="http://www.google.com/">
<img src="image2.jpg" alt="This is another tooltip"
title="This is another tooltip">
</a>
</div>
</div>
</body>
</html>

Was the Eric Meyer link on the page for which you did provide a URL not
helpful to you?

--
John
Yeah, yeah: The UIP: http://improve-usenet.org/

Report this message