Hello,
I want to design a mouseover text using the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<title>Infobox</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
#box a {
color:#ffffff;
background:#b3b06c;
font:bold 16px verdana, sans-serif;
text-decoration:none;
display:block;
width:150px;
padding:5px;
border:1px solid black;}
#box a:hover {
color:black;
background:#ddd8b7;}
#box a span {display:none;}
#box a:hover span {
position:absolute; top:10px; right:10px; z-index:3;
display:block;
width:300px;
color:black;
background:#ffffff;
font:normal 16px courier, sans-serif;
border:1px solid black;
padding:10px;}
-->
</style>
</head>
<body>
<div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit
amet.</span></a></div>
</body>
</html>
As you see the text in the span-tag is hidden (display:none) until the
mouseover (hover) effect is called.
This works fine, also in IE.
My problem is now, that if I am using a <a>-tag in the <span>-tag,
everything after the <a>-tag is _NOT_ hidden with display:none.
A simple example using the same css-definitions would be:
<div id="box"><a href="#">INFOBOX<span>Lorem ipsum <a
href="something">dolor</asit amet.</span></a></div>
I think it is because I cannot use a <a>-tag inside an <a>-tag.
So do you know any other solutions to solve this problem?
Regards,
Martin
