Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Firefox: Popup menu in span links to parent's link

  • 1 reply
  • 1 has this problem
  • 7 views
  • Last reply by cor-el

more options

A span with links displays as a pop-up when hovering over a parent anchor tag. But when a link is selected inside the span it fires the href from the parent anchor tag. Firefox displays the correct link when hovering over the anchor tag inside the span but when clicked it quickly displays the parent's anchor tag's href and links to it instead of the href in the anchor tag that's clicked.

This code works properly in IE 7 and IE 8 but not in Firefox (3.6.13):

<a href='/DesktopDefault.aspx?tabindex=5&tabid=6' class="OtherTabs">Admin&nbsp;
<span id="Span1" CssClass="OtherSubTabsBg"  >

<table id="Banner_tabs_submenu_5" class="OtherSubTabsBg" cellspacing="0" style="border-collapse:collapse;">
<tr>
<td><ul></td>
</tr><tr>
<td style="border-width:1px;border-style:solid;height:25px;">
   <li>&nbsp;<a id="LinkUrl" href='/Pages/AppOption1.aspx' class="OtherSubTabs" target="_top">Codes</a>&nbsp;</li>
 </td>
</tr><tr>

<td></ul></td>
</tr>
</table></span></a>

(Please pardon the table tags. It's generated by MS .Net objects.)

Here are the relevant styles:

A.OtherTabs:link    
{
    position:relative;
    z-index:24;
    text-decoration:    none;
    color:#dddddd;
}

A.OtherTabs:visited {
    text-decoration:    none;
    color:#eeeeee;
}

A.OtherTabs:active  {
    text-decoration:    none;
    color:#eeeeee;
}

A.OtherTabs:hover, A.OtherSubTabs:hover
{
    z-index:25;
    text-decoration:    none;
    color:#ffffff;
}

A.OtherTabs span { display: none; }

A.OtherTabs:hover span
{
    display: block;
    position: absolute;
    text-decoration:    none;
    color:#eeeeee;
}

Any help would be appreciated

A span with links displays as a pop-up when hovering over a parent anchor tag. But when a link is selected inside the span it fires the href from the parent anchor tag. Firefox displays the correct link when hovering over the anchor tag inside the span but when clicked it quickly displays the parent's anchor tag's href and links to it instead of the href in the anchor tag that's clicked. This code works properly in IE 7 and IE 8 but not in Firefox (3.6.13): <pre><nowiki><a href='/DesktopDefault.aspx?tabindex=5&tabid=6' class="OtherTabs">Admin&nbsp; <span id="Span1" CssClass="OtherSubTabsBg" > <table id="Banner_tabs_submenu_5" class="OtherSubTabsBg" cellspacing="0" style="border-collapse:collapse;"> <tr> <td><ul></td> </tr><tr> <td style="border-width:1px;border-style:solid;height:25px;"> <li>&nbsp;<a id="LinkUrl" href='/Pages/AppOption1.aspx' class="OtherSubTabs" target="_top">Codes</a>&nbsp;</li> </td> </tr><tr> <td></ul></td> </tr> </table></span></a> </nowiki></pre> (Please pardon the table tags. It's generated by MS .Net objects.) Here are the relevant styles: <pre><nowiki>A.OtherTabs:link { position:relative; z-index:24; text-decoration: none; color:#dddddd; } A.OtherTabs:visited { text-decoration: none; color:#eeeeee; } A.OtherTabs:active { text-decoration: none; color:#eeeeee; } A.OtherTabs:hover, A.OtherSubTabs:hover { z-index:25; text-decoration: none; color:#ffffff; } A.OtherTabs span { display: none; } A.OtherTabs:hover span { display: block; position: absolute; text-decoration: none; color:#eeeeee; } </nowiki></pre> Any help would be appreciated

Modified by cor-el

All Replies (1)

more options

A good place to ask questions and advice about web development is at the mozillaZine Web Development/Standards Evangelism forum.
The helpers at that forum are more knowledgeable about web development issues.
You need to register at the mozillaZine forum site in order to post at that forum.

See http://forums.mozillazine.org/viewforum.php?f=25