Spans are not creating hyperlinks within anchors

Check out the full code.

Here's the relevant code snippet:

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

Using 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 element does not take me to the specified href.

If you want to see the code for yourself, visit: . The span elements within the links represent usernames and the ellipsis "..." symbol.

htmlcss

Answer №1

Simply insert the following snippet into your CSS stylesheet:

.entire_post a {
  display:block
}

If you want to target only the first a element, you can create a class specifically for that element and apply the display:block property to it without affecting other sibling a elements.

Why is this necessary?

This is because a (and also span) are considered as inline elements by default.

Please take note: It's important to update your code and get rid of outdated elements such as <center> and <font>, among other errors found in your live demo.

Answer №2

To enhance the appearance of the anchor tag, you can apply styling by adding a specific class to it. It is advisable to use a class for this purpose.

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

Another issue present is that the .post_bar div includes a <br> tag, causing the height of the .post_bar to increase and obstruct the anchor tag. Removing the <br> tag will resolve this problem.

It is important to note that utilizing <br> tags for layout purposes is not recommended practice. Instead, strive to utilize CSS exclusively for layout structure.

Answer №3

Upon reviewing your website, it appears that there are additional issues beyond just the non-functioning links. Specifically, only the first post on your site is experiencing these link issues while all other posts are functioning properly. The root cause of this problem seems to be that the div with the class post_bar is not properly closed due to an interruption by a br tag. By ensuring that this tag is closed correctly (and perhaps removing the unnecessary br tags altogether), the links should start working as intended.

Here are some other recommendations for improving your site:

  • Make sure to include the html, head, and body tags in your code.
  • Set the attribute top of the post_bar div to 0px so that it remains fixed at the top of the screen.
  • Add a margin-top of 75px to the first entire_post div to position it below the post_bar without relying on br tags.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a more condensed materialized table with form elements

Currently, I am working on a timesheet table using Materialize CSS with form elements in cells. However, I find the height of the table rows to be too large for my liking. Is there any way to make the table more compact? If this is a limitation of Materi ...

htmlcssformsmaterialize

What is the process for submitting a form to a PHP page?

Could you assist me in posting a form with two fields on a php page using $_POST['json']; where the object will be of json type? <div id="result"></div> <form name="form" id="form" method="post" > Name: <input type="text ...

phpjqueryjsonposthtml

Utilizing Jquery to enhance slide image transitions with navigational links

As a newcomer to jQuery, I am attempting to create a slider using jQuery. Here is the script I have so far: $(function() { var bgCounter = 0, text = [ 'some html code here', 'some html code here', 'some ...

javascriptjqueryhtmlcssslide

Conceal the button and reveal the hidden paragraph by clicking the button

I'm trying to create a button with dual functionality - when clicked, the button should disappear and a hidden p-tag (with display: none;) should become visible. <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis. ...

javascriptjqueryhtmlcss

Developing a unique attribute using AngularJS

As a beginner in AngularJS, I am experimenting with creating directives to manipulate the background-color of a <div> based on specific conditions. I aim to write code like this within my view: <div effect-color="#2D2F2A">content here</div& ...

javascriptcssangularjs

What causes the disappearance of the figure under slider control?

One of the functionalities I am working on involves using three.js to dynamically adjust the rotation speed of a cube by utilizing a slider control. After setting up the scene, camera, and cube, the JavaScript code that controls the rotation speed looks li ...

htmlthree.js

How come the CSS for my angular ngx-mat-datetime-picker and mat-datepicker collide when they are both present on the same page?

Within the same form, I have two input fields stacked under each other. One is an ngx-mat-datetime-picker and the other is a mat-datepicker. Individually, they function correctly. However, when I open them for the second time, the one I opened first appear ...

cssangulardatepickerdatetimepicker

The implementation of CSS in one React component has an impact on the functionality of the Ant Design Select component in

I've run into a puzzling issue where importing CSS styles in one React component is impacting the appearance of Ant Design's Select component in another component. Let me break down the scenario: The setup involves two React components, namely P ...

cssreactjsnext.jsantd

Does Three.js have a concept similar to an origin point?

I am curious to know if there is a concept similar to an origin point in three.js like we have in Blender. I have been researching this topic without any luck. I am working on creating a pinball game and it is crucial that the origin point of the paddle ...

javascripthtmlthree.js3dcannon.js

struggling to insert submit button within input field in bootstrap 4.3.1

Currently, I am working with Bootstrap 4.3.1 and I have been attempting to place a submit button inside an input field. I have tried various methods from StackOverflow but haven't found a solution yet. Since my input has the class rounded-pill, it is ...

htmlcssbootstrap-4

Creating CSS-style overlayed images that are resizable

I have a collection of images all the same size, and I want them to be overlaid on top of each other. I've tried setting the position of the images to absolute, but this causes an issue with the container not adjusting its size accordingly. Additiona ...

htmlcss

Secure your Flask forms with CSRF token validation middleware

I'm handling an html form and want to make sure that all submissions originate from my website. I've noticed others using a key for this in Django, and I'm considering implementing something similar. Is there a recommended approach for achie ...

pythonhtmlflask

What is the best way to add animation to switch between table rows?

I am looking to add animation effects when table rows appear and disappear. Initially, I attempted using a CSS transition, but it did not work due to the change in the display property. Subsequently, I opted for an animation, which provided the desired o ...

csscss-transitionscss-animations

The height of adjacent divs should be uniform, resize seamlessly, and contain an absolutely positioned element within

Is there a way to make these neighboring divs the same height, responsive to browser window resizing, and with icons positioned on the corners? This method using display:table-cell works in most browsers but fails in Firefox due to a bug that causes the ic ...

htmlcssfirefoxheight

At times, Firefox may display HTML incorrectly due to rendering issues

I recently created a CSS menu that worked perfectly on all browsers during my testing with pure HTML/CSS. However, when we integrated the code into our development environment running on cakePHP, we encountered a peculiar bug in Firefox (3.5.2) specificall ...

htmlfirefoxrendering

The content in the footer is not displaying correctly (Vuejs)

I recently developed a component with a title and a background color meant to cover the entire page, but it seems to have a top margin that I can't seem to remove. Additionally, I created a footer component that should always stay at the bottom of the ...

htmlcssvue.jsbackgroundfooter

Show off markdown formatting without the need for v-html

I run a unique type of platform that allows users to publish their own blog posts using a WYSIWYG editor, and then share them on the site. My top priority is to ensure security against XSS attacks, which is why I am looking for alternatives to using v-htm ...

htmlvue.jsnpmxss

Improve the Popup to seamlessly elevate

In my project, I have implemented a pop-up dialog box that rises up from the left bottom corner as the user scrolls down the page. You can view it live at this link- However, I am facing an issue where the initial lift up of the dialog box is not smooth, ...

javascriptjqueryhtmlcsspopup

Reduce the size of a webpage by 10%

Have you ever noticed that when you press Ctrl+- on any browser, the page scales down to 90% of its original size? It actually looks nicer at 90%, so I want my webpage to default to opening at 90% instead of 100%. I've tried following common approach ...

javascripthtmlcssweb

Creating spacious gaps between list items

I have been working on creating a scrollable horizontal list using iscroll. Although the list functions properly, I am encountering an issue with spacing between each li item. Despite trying various solutions, I have been unable to remove the space betwe ...

cssiscroll