:hover combined with a and span in mac-ie5 /win firefox does not work

[tanja trueltzsch]

I like to have some links with large css-popups.
css-popups should contain headings and paragraphs and crop the content with offering a slidebar.

my code works more or less ;)
- it works perfectly on win-ie 6
- it works not-that-good in firefox (after having inserted the overflow-information, it startet swapping all the time)
- it does not work on mac-ie (5)

what went wrong?

here is my html-code:

<p>
 <a class="info" href="#">first headling that is sensitive
 <span>
 <h2>heading for tool-tip-text</h2>
 <p>tool-tip-text</p>
 </span>
 </a>
</p>
<p>
 <a class="info" href="#">second headline that is sensitive
 <span>
 <h2>heading for tool-tip-text</h2>
 <p>tool-tip-text</p>
 </span>
 </a>
</p>

and this is my css-code:

a.info {
font-size: 11px;
font-family: verdana, arial, helvetica, geneva, sunsans-regular;
font-weight: normal;
line-height: 14px;
position: relative;
z-index: 30;
}

a.info:hover {
z-index:31;
text-decoration: none;
background-color: #ECF6FC;
color:#1D6891;
border: dotted 1px #666666;
height: 15px;
}

a.info span{
display: none;
}

a.info:hover span {
display: block;
position: absolute;
text-decoration: none;
top:-30px;
left: 80px;
width: 350px;
height:150px;
color: #666666;
background-color: #ECF6FC;
border: dotted 1px #666666;
padding: 0px 10px 0px 10px;
overflow: auto;
} 

[edited by: SuzyUK at 1:21 pm (utc) on July 30, 2005]
[edit reason] Please no URLs : see TOS #13 [WebmasterWorld.com] [/edit]

[tedster]

<span>
<h2>heading for tool-tip-text</h2>
<p>tool-tip-text</p>
</span>

<Span> is an inline element. As such, it cannot contain block-level elements like <p> and <h1> When your mark-up is not valid, browsers must go into their error recovery routines to "guess" what the author intended. And so you will often get inconsistent results from one browser to another, because they make different guesses.

When trying to debug display issues, it's always good to validate first.

W3C Validator - HTML [validator.w3.org]
W3C Validator - CSS [jigsaw.w3.org]

[tanja trueltzsch]

thank you!

the tip with the inline element is cool. i saw the comment from w3c-validator, that the span is not closed. since i had no idea what it meant, i left it like it was (and it was closed ;) )

unfortunately the problem remains even when i leave out paragraphs and headings as my example code shows.