CODEWITHSUNDEEP
htmlcssdjango
adder
adder

Reputation: 3698

Applied CSS causes anchors to be unclickable

I have come across a very odd issue, I have noticed that all of a sudden my anchors stopped working, as in became unclickable. Then I figured it must be something related to applied CSS, and when I started disabling parts of my CSS, I narrowed down the issue to this couple of lines:

.content {
    width: 960px;
    margin: auto;
}

My page structure looks like this:

<!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>

...and all applied CSS combined looks like this:

.top-grid {
    margin: auto;
    background-color: #3D005A;
}

.branding-grid-container {
    background-color: #4e0e7c;    
}

.branding-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 400px;
    height: 6em;    
    background-color: #4e0e7c;
    margin: auto;
    width: 960px;
}

.branding-grid-buttons-not-authenticated {
    margin-top: 40px;
    grid-column: 3;
    width: 100%;
    text-align: right;
}

.branding-grid-buttons-not-authenticated a {
    border-style: solid;
    border-radius: 0.5em;
    border: none;
    color: white;
    font-size: 14px;
    padding: 10px 20px;
    margin-right: 10px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.button-help {
    background-color: #36c1d4;
}

.button-help:hover {
    background-color: #2a99a8;
}

.button-register {
    background-color: #FF9900;
}

.button-register:hover {
    background-color: #FF6600;
}

.button-login {
    background-color: #75C10A;
}

.button-login:hover {
    background-color: #62a307;
}

.branding-grid-buttons-not-authenticated a:hover {
    color: white;
    text-decoration: none;
}

.branding-grid-buttons-authenticated {
    margin-top: 50px;
    grid-column: 3;
    text-align: right;
}

.buttons-authenticated li {
    display: inline-block;
    padding-right: 20px;
}

.buttons-authenticated li a {
    color: white;
}

.buttons-authenticated li a:hover {
    color: #EC9419;
}

.nav-grid {
    background-color: #3D005A;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    width: 960px;
    height: 2.7em;
}

.search-bar {
    margin-top: 6px;
}

.nav-bar {
    margin-top: 5px;
    margin-bottom: 30px;
    text-align: right;
}

.above-form {
    background-color: #f5f3f2;
    color: #FF6600;
    margin-bottom: 15px;
    padding-left: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.error-wrapper {
    background-color: #F2DEDE;
    padding: 10px 20px;
    margin-bottom: 15px;
    color: #a94442;
    font-size: 14px;
}

.close-button {
    border: none;
    background-color: #F2DEDE;
    color: #a94442;
    font-size: 21px;
    font-weight: bold;
    padding: 0;
}

.close-button:hover {
    color: #685863;
}
ul#menu {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    display: inline-block;
}

.menu-item > a {
    float: left;
    display: block;
    padding: 0px 10px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #fff;
    min-width: 80px;
    text-decoration: none;
}

.menu-item > a:hover {
    color: #EC9419;
    text-decoration: none;
    max-height: 30px;
}

.search-bar form { font-size: 0; }

.search-bar input {
    display: inline-block;
    height: 2em;
    box-sizing: border-box;
    font-size: 1rem;
}

.search-box {
    border: none;
    padding-left: 10px;
    border-radius: 0.5em 0 0 0.5em;
}

.search-button {
    background-color: #FF9900;
    border-radius: 0 0.5em 0.5em 0;
    border: none;
    color: white;
    padding: 0px 15px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
}

.search-button:hover {
    background-color: #FF6600;
}

.search-bar {
    top: 0;
    bottom: 0;    
}

.content {
    width: 960px;
    margin: auto;
}

Here is the JS fiddle.

Why would this couple of lines cause such an issue? This has never occurred to me before. In the fiddle removing those couple of lines doesn't resolve the issue, whilst in my original code my anchor becomes clickable once those two lines are removed.

I'm referring to <a href="/shop/1/">spam (2018)</a> anchor specifically which I have created for the purpose of this minimal example but I have more than one and they all don't work.

Upvotes: 0

Views: 148

Answers (1)

Osvaldo Correia
Osvaldo Correia

Reputation: 434

Try this:

.content {
    width: 960px;
    margin: auto;
    padding-top: 20px;
}

Play with the value in padding-top until you're happy with it.

Fiddle: https://jsfiddle.net/mdvhyjs9/

By your request:

.search-bar {
    margin-top: 6px;
    height: 30px;
}

Play with the value in height until you like it.

Upvotes: 1

Related Questions