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>

htmlcss

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

The Bootstrap Carousel cannot be manually manipulated to switch images

I've run into an issue while trying to integrate a Bootstrap carousel gallery on my webpage. Although the photos automatically change after a few seconds, I am unable to manually switch them using the control buttons. Even after including Jquery, Po ...

htmlcarouselbootstrap-5

Issue with CSS transition not displaying ng-show elements properly

I'm currently working on incorporating a fade-in effect for text using the second solution from this source when using ng-show. Here is my HTML setup: <input ng-focus="hasFocus = true" ng-blur="hasFocus = false" type="text" placeholder="Cli ...

javascriptcssangularjs

Providing data from a javascript xml file upon page initialization

I am aiming to extract multiple values from an XML file as soon as an HTML page is loaded. The XML file remains constant and will not change over time. It will be stored in the same directory as the HTML page. The purpose of this XML file is to fill severa ...

javascripthtmlxmlajax

Prevent the ability to add options dynamically to a drop-down select list

I have implemented a dynamic data retrieval feature from my database using jQuery's .getJSON function and appended the data to an HTML select drop-down list. The JavaScript code for this functionality is as follows: $.getJSON('url', f ...

javascriptjqueryhtml

Alter the color of a single character using JQuery, all while keeping the HTML tags unchanged

I'm currently working on iterating through the DOM using JQuery in order to change the color of every occurrence of the letter m. Here is what I have so far: $(document).ready(function(){ var m = "<span style='color: red;'>m</span& ...

javascriptjqueryhtmldomdom-manipulation

Discover automatically generated titles for dynamic hyperlinks

I am looking to generate dynamic links for a collection of documents with varying names, such as Test, Test2, and so on. I want the link text to display as "Document TestN," where N is the specific document number. Currently, I am able to create the links ...

javascriptjqueryhtml

Trouble displaying data with Angular 6 JSON object pipe

Having an issue with displaying tasks from a MongoDB project schema in HTML. The tasks are stored in a nested array and I want to show the task name and description. Here's the code: <div class="card-body"> {{project.taskName | json}} </ ...

htmljsonangularmongodb

Delete particular user inputs following a $.ajax request

I have created a search feature with inputs that allow users to search the database using ajax requests. Unfortunately, I am facing an issue where the response from the server includes the search inputs themselves. This is not what I want. Here's a ...

javascriptjqueryhtmlajax

The Angular HTML Autocomplete feature is not functioning as intended when hosted on a CDN in Chrome, despite setting it to "nope" or "off"

When setting Autocomplete to "nope" or "off" in my input box for surname, I'm still able to select from the autocomplete list. This issue occurs when accessing our Ui app through CDN at link [https:// Xyz. net], but works correctly when accessing it d ...

angularjsangularhtml

What is the process for choosing the 1st, 4th, 7th element, and beyond?

Is there a way to choose the 1st, 4th, 7th elements and so on? Also, how can I select the 3rd, 6th, 9th, and beyond? The method involves selecting an element then skipping two before selecting the third one. I believe the :nth-child selector is the key bu ...

csscss-selectors

Struggling with this CSS is really getting to me

I am struggling to create a modal with the tools and close button appearing on the same line. It should look similar to the image below: var modal = document.getElementById('myModal'); var btn = document.getElementById("myBtn"); var span = doc ...

javascriptjqueryhtmlcss

rearrange the div elements by shifting each one into the one preceding it

Do you consider this a child and parent div relationship? <div class="container"> <p>content</p> </div> <div class="footer"><p>content</p></div> <div class="container"> <p>content</p> < ...

jqueryhtmlappend

Is there a way to search for text and highlight it within an HTML string using Ionic

Welcome everyone! I am currently utilizing Ionic to load an article from a local HTML string. <ion-content padding> <p [innerHTML]="url"></p> </ion-content> The 'url' variable contains the local HTML string. My goal ...

htmltypescriptionic-framework

Unable to close expanded grid item using close button

Currently, I am working on a simple 3 column grid where each grid item consists of an image and a close button. The functionality I want to achieve is that when a grid item is clicked, the image should expand and the close button should become visible. Th ...

javascripthtmlcsscss-gridevent-listener

The link tag cannot be used inside a division element

I am facing an issue with a button that has three different states represented by images. While the button looks great and functions well, it fails to perform its primary function - linking to another document. Upon clicking the button, no action is initi ...

javascripthtmlcss

Is there a way to change the font size with a click in JavaScript or Angular?

Here is a breakdown of the 4 steps: 1.) Begin by clicking on a category 2.) The filtered products will be displayed 3.) Select the desired products from the filter 4.) Once selected, the products will appear in the rightmost part of the screen within t ...

javascripthtmlcssangular

Assign a class while directing visitors away from a particular webpage

Can a div have a class added on page load, but only when redirected from a specific link or page? I currently have an <a href="marketing.php" id="openMyMaterialTab"><button class="secondaryAction">See all</button></a> link on my la ...

phpjqueryhtmlurlhttp-redirect

Navigating the elements within R Shiny: A comprehensive guide

Can anyone help me figure out how to access specific elements in my Shiny app using their HTML tags? In this particular example, I need to retrieve all h1 elements along with their respective labels and IDs. library(shiny) ui <- fluidPage( h1("Get" ...

javascripthtmlrshiny

What could be causing the issue of not being able to load CSS files or images?

I'm currently in the process of learning how to develop websites, but I've encountered a stumbling block that I can't seem to overcome. I'm hoping someone here can help me out. I'm facing an issue where I am unable to link either a ...

htmlcssnode.jsexpressejs

Effortlessly fill dropdown menus with data from JSON files

I've been using this jQuery code successfully, but I recently needed to add 3 more field columns to the JSON. My goal is to have the HTML select drop-downs dynamically change based on the data from the previous drop-down. Additionally, my current jQue ...

javascriptjqueryhtmljson