Link text not firing event but surrounding area does!

[CharlieLaw]

I have created a list of tabs with an assocaiated popup menu which is fired onmouseover. The menu is hidden when the onmouseout.

These events are associated with the <a> element and work fine in all browsers excepte safari 1.3. It appears that the events will only work when on the padded area of the link however when directly over the link text the event does not work. If I remove all the padding nothing happens at all.

Is this a safari bug?

addEvent(currentTab, 'mouseover', openPopupOnMouse, false);

function openPopupOnMouse(e) {

// First Check if any popup need closed.
closePopup(e);

if (window.event) {
var links = window.event.srcElement.id;
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
var links = e.target.id;
e.stopPropagation();
e.preventDefault();
}

// Create popup box or make an existing one visible
getAssocistedProducts(links);

// Check if the mouse is over the popup box or not
var parent = document.getElementById("wrapper");
var currentSection = links + "-products-box";
var section = getElementsByClassName(parent, "div", currentSection);
for (var i = 0; i < section.length; i++) {
// Keep section open if mouse is over popup box
section.onmouseover = function() {
this.style.visibility = "visible";
}
// Hide section open if mouse is away from popup box
section.onmouseout = function() {
this.style.visibility = "hidden";
}
}
}

function closePopup(e) {
if (!document.getElementById || !document.getElementById("nav-primary") || !document.getElementById("wrapper")
|| !document.getElementsByTagName || !document.getElementsByTagName("a")) return false;

if (window.event) {
var links = window.event.srcElement.id;
window.event.cancelBubble = true;
window.event.returnValue = false;
} else {
var links = e.target.id;
e.stopPropagation();
e.preventDefault();
}

// Check if their is a popup box open already. If so set that boxes visibility to hidden.

// Get all the links in the top links and loop through them, matching each top link with its associated popup box
var topTabLinks = document.getElementById("nav-primary").getElementsByTagName("a");
for (var i = 0; i < topTabLinks.length; i++ ) {
var parent = document.getElementById("wrapper");
var popUpBox = topTabLinks.id + "-products-box";
var productSection = getElementsByClassName(parent, "div", popUpBox);
// If their are no sections created then exit
if (!productSection) return false;
// If their are sections available, loop through each 1 making them hidden
for (var j = 0; j < productSection.length; j++) {
productSection[j].style.visibility = "hidden";
}
}
}

// Associate the top tab link with the product links at the bottom of the page
function getAssocistedProducts(relatedLinks) {
if (!document.getElementById || !document.getElementsByTagName) return false;
var section = (relatedLinks + "-products");
var parent = document.getElementById("wrapper");
var currentSection = (relatedLinks + "-products-box");
var thisSection = getElementsByClassName(parent, "div", currentSection);

// Test that there is not a nav popup build already, if there is not one their build one
if (thisSection.length == 0) {
// Check to see if the nav has more than one link associated with it.
// If section has more that one link then it requires a popup box to be built
var getSection = document.getElementById(section).getElementsByTagName("li");
if (getSection.length > 0 ) {
constructPop(getSection, section);
}
}

// If there is a nav already in place, make it visible
if (thisSection.length >= 1) {
for (var i = 0; i < thisSection.length; i++) {
thisSection.style.visibility = "visible";
}
}
}

 

[cLFlaVA]

do you have a nested tag inside your anchor? something like

<a href="blah"><span>something</span></a>

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

 

[CharlieLaw]

No just a basic list with links inside it.

<ul class="clearing">
<li><a href="/personal/finance/insurance/index.jsp" id="ins">Insurance</a></li>
<li><a href="/personal/finance/finance/creditcards/index.jsp" id="cards">Credit cards</a></li>
<li><a href="/personal/finance/finance/loans/index.jsp" id="loans">Loans</a></li>
<li><a href="/personal/finance/finance/mortgages/index.jsp" id="mort">Mortgages</a></li>
<li><a href="/personal/finance/savings/index.jsp" id="save">Savings</a></li>
<li id="last"><a href="/personal/finance/travel.jsp" id="travel">Travel</a></li>
</ul>