Bookmarks

Yahoo Gmail Google Facebook Delicious Twitter Reddit Stumpleupon Myspace Digg

Search queries

www.xxxcon, which comes first ob_start or session, wwwxxx/58/2010, xxxxdup, xxxxdup, mailx informatii, should producers of software-based services, such as atms, be held liable for economic injuries suffered when their systems fail?, mysql feiertage, bash netcat eof, 192.168.1.41:8000

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