There appears to be a malfunction with certain hyperlinks on the table

There seems to be an issue with the four links in the third column, first, second, third, and fourth rows (Order Form PDF, Rental App PDF, Married Rental PDF, and Consent Form PDF) as they are not functioning properly.

Below is the provided code snippet:

#applicationtable {
  width:550px;
  margin-left:50px;
  margin-bottom:50px;
  margin-top:50px;
}

#applicationtable table td  {
  text-align: :left;
  padding:10px;
  border-bottom:1px solid black;
  font-size:.9em;
}

#applicationtable table th {
  text-align: left;
  padding-left:8px;
}


#applicationtable a:link {
  color:hsla(243, 100%, 50%, 1);
}

#applicationtable a:visited {
  color:hsla(243, 100%, 70%, 1);
}

#applicationtable a:hover {
  color:hsla(243, 100%, 50%, .25);
}
<div id="wrapper">
  <div  class="floatleft">
    <div id="applicationtable">
      <table>
        <thead>
          <tr>
            <th scope="col"><strong>Landlord Rental Applications</strong></th>
            <th scope="col">Word Document</th>
            <th scope="col">PDF Document</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Order Form</td>
            <td><a href="../documents/orderform.doc">Order Form Word</a></td>
            <td><a href="../documents/orderform.pdf">Order Form  PDF</a></td>
          </tr>
          <tr>
            <td class="tablebackground">Rental Application</td>
            <td class="tablebackground"><a href="../documents/rentalapp.doc">Rental App Word</a></td>
            <td class="tablebackground"><a href="../documents/rentalapp.pdf">Rental App PDF</a></td>
          </tr>
          <tr>
            <td>Married Rental Application</td>
            <td><a href="../documents/rentalmar.doc">Married Rental Word</a></td>
            <td><a href="../documents/rentalmar.pdf">Married Rental PDF</a></td>
          </tr>
          <tr>
            <td class="tablebackground">Applicant Consent Form</td>
            <td class="tablebackground"><a href="../documents/consentform.doc">Consent Form Word</a></td>
            <td class="tablebackground"><a href="../documents/consentform.pdf">Consent Form PDF</a></td>
          </tr>
          <tr>
            <td>Lease Agreement</td>
            <td><a href="../documents/lease.doc">Lease Word</a></td>
            <td><a href="../documents/lease.pdf">Lease Rental PDF</a></td>
          </tr>
          <tr>
            <td class="tablebackground">Property Management Agreement</td>
            <td class="tablebackground"><a href="../documents/propagreement.doc">Prop Agreement Word</a></td>
            <td class="tablebackground"><a href="../documents/propagreement.pdf">Prop Agreement PDF</a></td>
          </tr>
          <tr>
            <td>Denial Letter</td>
            <td><a href="../documents/denialletter.doc">Applicant Denial Word</a></td>
            <td><a href="../documents/denialletter.pdf">Applicant Denial PDF</a></td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="3" class="smalltext">Everything needed to process a report is in the order form download!</td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

Answer №1

It seems like the code and links are functioning correctly, but it's crucial to verify that the PDF files linked in the anchor tags exist on your server...this could be the root cause of the issue you're encountering.

Answer №2

Realized there was another div blocking the one I was trying to access. It turned out that the other div was a relative div positioned over the header. Adding position:relative; into the css solved the issue easily. Apologies for any confusion caused!

Best regards,

Brandon C Varn

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

How to achieve a Dropbox-inspired footer effect using CSS?

Take a look at dropbox's website here: Have you noticed how the footer with "Learn more" remains fixed at the bottom regardless of window resizing until you click or scroll down? position: absolute; bottom: 50px; left: 0; width: 100%; text-align: ce ...

Experience the full functionality of Google Maps API without the need for jQuery or PHP with PanTo

I'm not a developer and I find myself stuck in the panTo() function. All I want is to execute this function with an if-else statement without having to reload the Google Map or using jQuery. <body> <div id="map"></div> <d ...

Tired of the premium content on Medium.com. How can I conceal premium posts that are aimed at a specific class within a parent element?

I have noticed that all Premium posts contain an element with the class ="svgIcon-use" <svg class="svgIcon-use" width="15" height="15" viewBox="0 0 15 15" style=""><path d="M7.438 2.324c.034-.099.090 123 0l1.2 3.53a.29.29 0 0 0 .26.19h3.884c.11 0 ...

I am looking to adjust the height of my MUI Grid component

Recently exploring React, and I'm looking to set a height limit for MUI Grid. I've structured my project into 3 sections using MUI grid components. My goal is to restrict the page height in order to eliminate the browser scrollbar. If the conten ...

Learn how to utilize AngularJS Material to toggle the enable/disable functionality of a checkbox

Can someone assist me in enabling and disabling the checkbox as shown in the attachment image https://i.stack.imgur.com/l6g1C.jpg View the PLNKR angular.module('BlankApp', ['ngMaterial']) .config(['$mdThemingProvider', fun ...

When the left/top/right/bottom properties are not specified, using position:fixed produces the desired results in Firefox and Internet Explorer, but not in Safari

It's unfortunate that I have to bring up another question related to position:fixed, but after going through various other questions and forum threads, I'm still not clear on this particular issue. The code below is a simple illustration of how ...

Submitting form data from an HTML page to a specific Skype account is a straightforward process that can be easily accomplished

[Situation] A new feature is being considered for a feedback form that would allow users to input their name, email address, subject, and message. A unique option being proposed is the ability for users to submit their messages via Skype. If this option is ...

Guide to verifying a value within a JSON object in Ionic 2

Is there a way to check the value of "no_cover" in thumbnail[0] and replace it with asset/sss.jpg in order to display on the listpage? I have attempted to include <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html, but it only shows the thumbna ...

Creating a user authentication portal

Looking for advice on creating a basic front end HTML login. I'm new to coding and would appreciate any suggestions! Additionally, how can I link the login system to my database? ...

Achieving a fixed footer at the bottom with absolute positioning on a webpage

I'm facing an issue with positioning a footer on my webpage, which is made up of div sections that are absolutely positioned. The problem arises because using the bottom property fixes the footer to the bottom of the screen rather than the bottom of t ...

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so ...

Creating an element that remains fixed once it reaches a distance of 50px from the top of the screen

Hey there! I'm working with an html div element that currently scrolls along with the page, but I was wondering how I can make it become fixed once it reaches a distance of 50px from the top of the screen. Any ideas on how to achieve this? Just to pro ...

Why does my element appear to be a different color than expected?

I've developed a sleek wind map (check out for reference). Using a weighted interpolation every 10ms, I generate uVector and vVector data to calculate wind speed. Based on this speed, each point is assigned a specific color as outlined below. if (we ...

The CSS filter "progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80)" is not functioning properly in Firefox

Trying to apply a filter effect using CSS but encountering issues in Firefox: progid:DXImageTransform.Microsoft.Alpha(style=1,opacity=80 ) opacity: 0.5; -moz-opacity: 0.5; Any s ...

Add Django template without adding an extra line break

In my main.html template, I have the following code: <p>{% include "pouac.html" %}{% include "pouac.html" %}</p> The file pouac.html contains just one line: <span>pouac</span> When rendered, the main.html template generates two ...

Wheelnav.js implementing a dynamic bouncing animation

I'm currently in the process of working on a pie menu with wheelnav.js and everything is going smoothly so far. However, I can't seem to find any information in the wheelnav.js documentation on how to eliminate the bouncing effect when a menu cho ...

Altering the innerHTML of a <p> tag with a smooth transition

I am a beginner in the world of web design. I am currently working on a project where I need to continuously change the text inside a <p> element with a transition effect similar to a slideshow. Below is the code I have so far: <p id="qu">S ...

Having trouble adjusting the height of <a> elements in the navbar

My navbar has an issue where the listed items do not fill the entire height of the navbar. I have tried adjusting padding and margin, but it doesn't seem to be affecting the layout. Any suggestions would be greatly appreciated. Thank you. #navbar { ...

When I hover over div 1, I am attempting to conceal it and reveal div 2 in its place

I need help with a CSS issue involving hiding one div on mouse hover and showing another instead. I attempted to achieve this using pure CSS, but both divs end up hidden. Would jQuery be necessary for this task? Below is the CSS/HTML code I wrote: .r ...

Monitoring Javascript inactivity timeouts

As I work to incorporate an inactivity timeout monitor on my page, the goal is to track whether individuals working from home are present at their desks or not. The Jquery plugin http://plugins.jquery.com/project/timeout that I am utilizing initiates a ti ...