Member Avatar for <M/>

I have a logo on my page that won't become a link... Can someone help me...
I don't want to post the link to my page but I will send you the link...

Thanks

  • 6 Contributors
  • 12 Replies
  • 101 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

A few targeted tests will find whether this is a markup problem, a styling/stacking issue, or JavaScript intercepting the click. and covered the basic HTML checks and already showed the clickable hotspot is smaller than the visible logo, so run checks that reveal what is physically sitting above that image and which code is handling clicks.

Use the browser console and inspector to see which element is under the pointer. In the console run:

document.elementFromPoint(x, y)

(where x,y are coordinates over the visible but non-clickable part). That returns the exact DOM node that receives the hit. While inspecting, look at the computed box model to confirm the anchor's layout area actually matches the image.

Temporarily disable potential interceptors. In DevTools you can:

  • Turn off CSS rules one-by-one or remove suspected elements.
  • Temporarily set any overlay class to ignore pointer events to test if it’s covering the logo:
.suspect-overlay { pointer-events: none !important; }

Caution: use this only for testing; do not ship it as a permanent fix. Also check the Event Listeners pane for click handlers on ancestors or document that might call preventDefault/stopPropagation.

Other things not yet covered in the thread: nested anchors (an anchor inside another anchor will not behave as expected), and stacking-context causes (CSS transforms, opacity, filters, and some positioning rules create new stacking contexts that change which element sits on top even if z-index values are adjusted). If the logo works in an isolated minimal HTML page but not in the full site, the problem is almost certainly a style or script from another component. For reference: MDN docs for elementFromPoint, pointer-events, the anchor element, and stacking behavior are useful starting points: Document.elementFromPoint, pointer-events, HTML a element, and Understanding z-index.

Recommended Answers

All 12 Replies

Member Avatar for ome2012

send me the link....

Member Avatar for <M/>

This issue is on every page and i sent you the link

Member Avatar for stultuske

the link doesn't matter. it's the code you should be showing.

Member Avatar for lps

Have you double check the link structure? It should be something similar to this:
<a class="logo" href="http://www.google.com"><img src="logo.png"/></a>

Member Avatar for singhboy

I think your link is not correct. You have to take help w3school for correction of your link.

Edited by pritaeas because: Removed fake signature.
Member Avatar for ome2012

in your div logo...

at the end of your img src code just add an end tag.... because in your code you forgot to have an end tag of it... try it ^_^

Edited by ome2012
Member Avatar for JorgeM

Your anchor (link) is formatted OK (just copy the code to a blank page and you will see that it works fine) and the image element should have a "/" before the close of the element, but that is not the problem here.

I took a quick look with my browser's developer tools and found that for some reason your anchor "<a>" element for this particular link is styled with a width of 180px and height of 15px.

I dont have time at the moment to go through your Styles to see if you are placing this element behind the div or something similar, but that is what I suspect your problem is.

Member Avatar for <M/>

Wow thanks you guys for contributing!

JorgeM, I tried out the solution but I don't see a change... I placed the closing but the logo is still unclickable... are you able to tell me which css element was at 15px?

Member Avatar for JorgeM

I haven t had a chance to look deeper, but I can tell you when I was using the built in dev tools in the browser, when I clicked on the anchor tag in te source, those where the properties shown o the screen. It didn't look right. If you copy the code on its own page, it works fine. This appears to be a styling problem.

Member Avatar for <M/>

Can you tell me which styling of mine is causing this flaw...?

Member Avatar for JorgeM

Ok so it appears to me that you have two divs one on top of each other (Header and logo). the problem that I see if that your header is placed over (z-index) the logo div.

#Header {
width: 1000px;
height: 83px;
margin: 0 auto;
position: absolute;
z-index: 500;
}
Member Avatar for <M/>

Sorry for my extremely late response...

I tried adjusting the z-index's... but it doesn't work... (so i set it back to what it used to be until i can fix this flaw)

But what i do get though is a hover, but only in a small portion of the logo

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.