Click here to get back home

Problem with CSS Mouseover
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Problem with CSS Mouseover =?ISO-8859-15?Q?Martin_P=F6ppi 09-24-2006
Get Chitika Premium
Posted by =?ISO-8859-15?Q?Martin_P=F6ppi on September 24, 2006, 9:39 am
Please log in for more thread options

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

#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</a> sit 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

Posted by Jukka K. Korpela on September 24, 2006, 4:13 pm
Please log in for more thread options

Martin Pöpping wrote:

> I want to design a mouseover text using the following example:

You should have posted the URL, and you should have considered whether you
really have an HTML problem or something else.

> <div id="box"><a href="#">INFOBOX<span>Lorem ipsum dolor sit
> amet.</span></a></div>
- -
> As you see the text in the span-tag is hidden (display:none) until the
> mouseover (hover) effect is called.

You forgot the usual CSS caveats. When CSS is off - e.g., when a search
engine robot analyzes you document, the content is
INFOBOXLorem ipsum dolor sit amet.
(without a space after the "X").

> This works fine, also in IE.

For some values of "works". By the way, when the user clicks on the link
text, he jumps to the start of the document. This doesn't match my value for
"works".

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

That would be invalid markup, so why would you use it?

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/


Similar ThreadsPosted
embedding + mouseover September 24, 2004, 12:45 am
How to get MAP to work with mouseover April 10, 2006, 10:59 pm
mouseover/hover Link September 22, 2006, 3:05 am
HTML image map mouseover help October 7, 2006, 1:11 pm
IE6 elements out of place until mouseover? September 25, 2008, 5:54 pm
Simple table row highlighting - on mouseover October 13, 2004, 10:02 am
Is it possible to mouseover a GRAPHIC . . . that launches another (freestanding) GRAPHIC (ie. when flash is _not_ available)? December 8, 2006, 1:03 pm
Someone - **please, please, please** help :-( .js problem January 16, 2005, 6:01 am
Problem with June 29, 2005, 3:12 pm
Problem January 2, 2006, 6:32 am

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap