Forum Moderators: not2easy

Message Too Old, No Replies

disabling linking within css popup

links inside my popup seem to conflict with the popup's own link

         

unsorted89

8:59 pm on Jun 23, 2009 (gmt 0)

10+ Year Member



I'm trying to create CSS popups using the <span> property which contain links inside them. I want the popup to persist while I am hovering over either the linked text or the popup itself, so that I can click the links inside the popup.

My problem right now is that the entire popup is one giant link, so when I'm mousing over it all the text links to whatever I set the link to (in this case, "#" so it won't go anywhere). Or at least, it's a giant link in firefox; in IE it's a link up until I reach my first link inside the popup, at which point it stops being a link, and additionally the functionality that made the popup persist while hovering over it stops. It's as if IE realized that I put a link inside my link and decided to complain.

It seems like my problems would be solved if I could disable the linking functionality within the popup. How do I do that? Some simplified code is posted below:

Thanks in advance for your help!


<html><head>

<style>
table.packages td a { }
table.packages td a:hover {
margin: 0em;
position: relative;
}
table.packages td a:hover span {
color: black;
background: white;
display: block;
padding: 3px;
border: 2px solid black;
position: absolute;
top: 0px;
left: 0px;
text-align: justify;
font-size: 8pt;
z-index: 999;
}
table.packages td a span { display: none; }
table.packages td a span:hover { }
</style></head><body>

<table border="1" class=packages><tbody><tr><td>Instance</td><td>Last Value</td></tr>
<tr><td>foo.130&nbsp;<a href="#">(see all 11)<span>
<div align="center">header<br>
<a href="somewebsite">link</a> - <a href="somewebsite">edit</a></div><br>
<table border="1"><tbody>
<tr><td>Instance</td><td>Link</td></tr>
<tr><td>foo.127</td><td align="center"><a href="somewebsite">link</a></td></tr>
</tbody></table></span></a></td><td>197327</td></tr>

<tr><td>foo.125&nbsp;<a href="#">(see all 10)<span>
<div align="center">header<br>
<a href="somewebsite">link</a></div><br>
<table border="1"><tbody>
<tr><td>Instance</td><td>Link</td></tr>
<tr><td>foo.125</td><td align="center"><a href="somewebsite">link</a></td></tr>
</tbody></table></span></a>
</td><td>53149</td></tr>

<tr><td>foo.129</td><td>1</td></tr>
</tbody></table>

</body></html>

jameshopkins

9:05 am on Jun 24, 2009 (gmt 0)

10+ Year Member



Anchor elements aren't allowed as descendants of other Anchor elements - this is invalid HTML.

unsorted89

7:53 pm on Jun 26, 2009 (gmt 0)

10+ Year Member



so, there's no way to create links inside my popups?

also, even if I can't create more links, is there a way to disable the actual link that my popup currently is pointing to?

swa66

7:58 pm on Jun 26, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The trick is to not make the :hover on an <a>, but to make it work on something else.
The problem with that will be IE6 which won't honor :hover on anything but an <a> It's one of those annoyances of legacy IE versions.

Please do get you code validated (at e.g. [validator.w3.org...] )

IE7.js can fix the lack of support of selectors in IE6 considerably.