Search code examples
htmlcsshyperlinkhref

External Link not working in CSS & HMTL because of zero size

I have a pretty simple issue that there I have social class and then facebook. In facebook class I am attacking facebook icon as background in normal and hover.

<div class="social socialteam facebook">
    <a href="https://www.facebook.com"></a>
</div>

These classes have nothing special which can block the link CSS Code

.social { display: inline-block; cursor: pointer; width: 32px; height: 32px; margin-right: 5px; }
.facebook { background: url(../images/facebook.png) }
.facebook:hover { background: url(../images/facebooka.png) }

After analyzing inspect element and checking layout and computed tabs, i realized that the size of <a href="https://www.facebook.com"></a> is 0 (zero) So if i place space ( &amp ; ) it works but then it loses its regular place and shows one line below.

<a href="https://www.facebook.com">&nbsp;</a>

So what is there any workaround that i can make the link work without its place getting changed?

With correct placement but link not working enter image description here

With incorrect placement but link working enter image description here

Thank You

Solution

  • Your link has nothing in it so it has no dimensions (links are inline elements so unless there's something in it, it will take no space) - you either need to add the social class to the link or add another class and give it some dimensions so it fills the div

    Below I have added a social-link class to the link and then styled it so that it fills the parent div:

    .social {
  display: inline-block;
  width: 32px;
  height: 32px;
  margin-right: 5px;
}

/* this is what is added to make the link fill the parent */
.social-link {
  display: block;
  width: 100%;
  height: 100%;
}

.facebook {
  background: red url(../images/facebook.png)
}

.facebook:hover {
  background: blue url(../images/facebooka.png)
}
    <div class="social socialteam facebook">
  <a href="https://www.facebook.com" class="social-link"></a>
</div>