CODEWITHSUNDEEP
htmlcss
Web Developer 101
Web Developer 101

Reputation: 11

Spans aren't hyperlinking inside anchor

Here's the entire code.

Here's the applicable code:

<a href='http://app.bithumor.co/report_post?id=568'><span class='report_icon'></span></a>

With CSS:

<style>
.report_icon {
    width: 60px;
    height: 17px;
    padding-left: 20px;
    vertical-align: middle;
    content: url(http://s10.postimg.org/7e5s3kasl/more_info.png);
    float: right;
    padding-right: 20px;
    padding-top: 13px;
}
</style>

Clicking on the span tag is not navigating me to the href.

If you would like to the code love, then you can view it here: http://test.bithumor.co/test9.php, the spans that are within anchors are the usernames and the three dots "..."

Upvotes: 0

Views: 96

Answers (3)

dippas
dippas

Reputation: 60573

just add this to your CSS

.entire_post a {
  display:block
}

you can always create a class to that first a and with that display:block will affect just the first a and not other a siblings.

why?

because a (and span as well) is an inline element.

NOTE; In your code (live demo) you have, <center> and <font> which are outdated among other errors

Upvotes: 2

Youppi3
Youppi3

Reputation: 66

After looking at your site, there are many more issues than just these links not functioning. That being said, if you look closely at your site, you can see that just the first post has these issues and every other post's links are working. The reason for this is that the div with the post_bar class is not closed properly because it is interrupted by a br. If you close this tag properly (and maybe get rid of those brs completely, the links will work properly.

Some other notes for your site:

  • remember to use html, head, and body tags.
  • the post_bar div should have its attribute top set to 0px to keep it at the top of the screen since its position is fixed.
  • the first entire_post div should have a margin-top of 75px to keep it under the post_bar instead of using brs.

Upvotes: 0

martnu
martnu

Reputation: 763

You need to style the anchor tag, add a class to it or do something like this. I would recommend a class though.

.entire_post > div a:last-child {
  display: block;
  float: right;
}

You also have an issue where your .post_bar div contains a <br> which expands the height of the .post_bar and blocks the anchor tag. Remove the <br>-tag.

Might be worth knowing that using <br> for layout is considered bad practice, so try to use only CSS.

Upvotes: 0

Related Questions