An unusual issue has recently surfaced - all of a sudden, my anchor links have stopped functioning. After some investigation, I suspected it had something to do with the CSS styles applied. Upon disabling parts of the CSS, I traced the problem back to these specific lines:
.content {
width: 960px;
margin: auto;
}
The structure of my page is as follows:
<!DOCTYPE html>
<html>
<head>
<title>CoinShop v1.0</title>
<link rel="stylesheet" type="text/css" href="/static/pages/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/searchbar.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/products/css/detail.css">
</head>
<body>
<div class='top-grid'>
<div class='branding-grid-container'>
<div class='branding-grid'>
<div class='branding-grid-buttons-not-authenticated'>
<a href="/help/" class='button-help'>Help</a>
<a href="/accounts/register/" class='button-register'>Register</a>
<a href="/accounts/login/" class='button-login'>Login</a>
</div>
</div>
</div>
<div class='nav-grid'>
<div class='search-bar'>
<form action="/shop/" method="GET">
<input type="text" name="q" placeholder="Search" class='search-box'>
<input type="submit" value='Search' class='search-button'>
</form>
</div>
<div class='nav-bar'>
<nav>
<ul id='menu'>
<li class='menu-item'><a href="/">Home</a></li>
<li class='menu-item'><a href="/shop">Shop</a></li>
<li class='menu-item'><a href="/contact">Contact</a></li>
<li class='menu-item'><a href="/about">About</a></li>
</ul>
</nav>
</div>
</div>
</div>
<div class='content'>
<a href="/shop/1/">spam (2018)</a>
<h1>spam (2018)</h1>
<p>eggs</p>
<p>Price: 200.00</p>
</div>
</body>
</html>
Furthermore, here is a summary of the combined CSS styles being used:
css /* place all CSS styles here */A JSFiddle link to the code can be accessed for reference.
Why would these particular lines cause such a disruption? This issue is entirely new to me. Interestingly, removing these lines in the original code fixed the problem with unclickable anchors, while the same modification did not resolve the issue in the JSFiddle example provided.
I am primarily focusing on the anchor tag `spam (2018)` created for demonstration purposes, but similar non-functioning anchor tags are present throughout the code.