Member Avatar for JameB
JameB 66 Junior Poster

Sometimes when the visitor clicks a button, nothing happens. I can't seem to figure out what the problem is. 

<ul id="navigation">
			<li style="border-left-width:0px;"><a href="">Main</a></li>
			<li><a href="">Ask 188</a></li>
			<li><a href="">Season</a></li>
			<li><a href="">Resources</a></li>
			<li><a href="">Robots</a></li>
			<li><a href="">Gallery</a></li>
			<li><a href="">History</a></li>
			<li><a href="">FLL - Vex</a></li>
			<li><a href="">Sponsors</a></li>
			<li><a href="">Mentors</a></li>
			<li><a href="">Contact</a></li>
		</ul>

And the css with it is:

#navigation {
margin: 0;
margin-top:-47px;
margin-left:auto;
margin-right:auto;
padding: 0;
width: 795px;
height: 37px;
border-style: solid;
border-color:#AB0B0B;
border-width:2px;
border-bottom-width:0px;
border-left-width:1px;
border-right-width:1px;
background: #FDE5D8;
line-height:200%;
list-style: none;
}

#navigation li {
text-align:center;
vertical-align:middle;
width: 71px;
height:37px;
float: left;
border-left-width:1px;
border-left-color:#FFCCCC;
border-left-style:solid;
}

#navigation li a {
display: block;
vertical-align:middle;
color:#AB0B0B;
font-weight:500;
text-decoration:none;
width: 71px;
height:37px;
}

#navigation li a:hover {
text-decoration:underline;
font-weight:500;
color:#AB0B0B;
vertical-align:middle;
width: 71px;
height:37px;
}

#navigation li a:active {
text-decoration:line-through;
font-weight:400;
color:#AB0B0B;
vertical-align:middle;
line-height:150%;
width: 71px;
height:37px;
}

Any clues? Is the problem because of the fact that the line-height is changing?

Edited by JameB because: n/a
  • 1 Contributor
  • 0 Replies
  • 121 Views

Dani AI

Generated

— line-height is unlikely to silently break clicks. The usual causes are either malformed HTML (broken href attributes or nested tags), an invisible element sitting on top of the nav and intercepting mouse events, or a script that prevents the default action. The paste of your markup looks mangled (anchors inside hrefs), so first confirm the browser actually receives valid anchor tags.

Quick, practical checks (in this order):

  • Open DevTools → Elements and hover each <a>/li> to see the highlighted hit box. If the visible button area is not highlighted or something else highlights above it, there is an overlay.
  • With the element selected, check computed styles for pointer-events, position and z-index. A parent with pointer-events:none or a positioned overlay with a higher stacking context will block clicks.
  • In the Console try document.elementFromPoint(x, y) (use coordinates over a non-working button) to see which element the browser thinks is under the cursor.
  • Check for JavaScript handlers that call preventDefault() or return false on click for that element.

If the nav is being covered, a minimal fix is to create a stacking context for the nav so it sits on top:

#navigation { position: relative; z-index: 9999; }

Also verify every <a> actually has a valid href (not empty, not malformed) and that the links aren’t pointing to the exact same URL you’re already on (that will appear to “do nothing”). Avoid changing line-height on :active because it can shift layout during click; prefer stable sizing and visual feedback via background or transform.

For reference on debugging hit testing and stacking contexts see MDN’s notes on elementFromPoint, pointer-events and z-index/stacking context.

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.