Link is causing CSS style to malfunction

I am facing an issue with the styling of my JSP page. When I link the external style sheet using this code:

<link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css" />

it seems to have no effect on the appearance of my page. However, if I directly include the same styles in the HTML heading, it works perfectly fine. Here is how my directory structure looks like:

|--web  
|----doctor  
|-------------css  
|---------------------form_input.css  
|-------------view  
|---------------------view.jsp  
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <script>
      $(function() {
        $( "#tabs" ).tabs();
      });

    </script>
  </head>
  <body>
    <form action="/changeLanguage">
      <select id="language" name="language" onchange="submit()" style="margin-left: 50px">
        <option value="en" ${language == 'en' ? 'selected' : ''}>English</option>
        <option value="ru" ${language == 'ru' ? 'selected' : ''}>Русский</option>
        <option value="es" ${language == 'es' ? 'selected' : ''}>Español</option>
      </select>
    </form>
    <ex:info-time/>
    <div id="tabs">
      <div class="container">
        <ul class="nav nav-tabs">
          <li><a href="#tabs-1"><fmt:message key="login.button.submit"></fmt:message></a></li>
          <li><a href="#tabs-2">Register </a></li>
        </ul>
        <div id="tabs-1">
          <div class="account-status">
            <form method="post" action="account">
              <fieldset>
                <label class="form-label" for="username"><fmt:message key="login.label.username" />: </label>
                <input type="text" class="form-control form-input" name="username" id="username" placeholder="Login">
              </fieldset>
              <fieldset>
                <label class="form-label" for="password"><fmt:message key="login.label.password"></fmt:message> </label>
                <input type="password" class="form-control form-input" name="password" id="password" placeholder="Password">
                <input type="submit" class="btn btn-primary form-button" value="Login">
              </fieldset>
            </form>
          </div>
        </div>
        <div id="tabs-2">
          <div class="account-status">
            <form method="post" action="account?action=register">
              <fieldset>
                <label for="username_register" class="form-label"><fmt:message key="login.label.username"></fmt:message> </label>
                <input type="text" name="username_register" id="username_register" class="form-control form-input">
              </fieldset>
              <fieldset>
                <label for="password_register" class="form-label"><fmt:message key="login.label.password"></fmt:message> </label>
                <input type="password" name="password_register" id="password_register" class="form-control form-input">
              </fieldset>
              ..etc
              <fieldset>
                <input type="submit" class="btn btn-primary form-button" value="Register">
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

UPDATE

After changing the href to the following piece of code:

href="${pageContext.request.contextPath}css/form_input.css"

When inspecting the page (F12), it shows me the error message below:

GET http://localhost:8086/doctor/css/form_input.css 404 NOT FOUND account:14

Answer №1

In my opinion, the correct path to follow would be ../css/form_input.css. Do you agree?

Answer №2

After some thorough investigation, I've pinpointed the problem - turns out my filter was blocking all incoming links...

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

Proper Placement of Required Field Validator Messages

I am having an issue with the validation text appearing behind my textbox instead of below it. Despite setting the display to block in the CSS class for the assignment type and start date, the validation text is not displaying properly. I have tried variou ...

Duplicating labels with JavaScript

I need assistance with copying HTML to my clipboard. The issue I am encountering is that when I try to copy the button inside the tagHolder, it ends up copying <span style="font-family: Arial; font-size: 13.3333px; text-align: center; background-color: ...

Element in list does not cover entire ul

I'm having trouble getting my list elements to span the entire width of the unordered list. I've tried applying styles to the nav ul li and setting the width to 100%, but nothing seems to work. How can I achieve this? .nav-container { border- ...

Ensure one div scrolls independently while the other remains fixed using Bootstrap

I am currently in the process of constructing a web page with Bootstrap 4. The layout consists of two columns, each contained within individual divs. My requirement is for the content on the right side to be scrollable while the content on the left remains ...

The CSS selector ">" is not functioning correctly, and neither is the "~" selector

I am currently working with the following CSS: .images_container input[type="checkbox"]:checked > label { border-color:#4378c3; opacity:1.0; } .images_container input[type="checkbox"] > label:hover { opacity:1.0; } .images_container input[type="chec ...

Handling versioning when a property is deprecated in semver

We've implemented semver for maintaining our CSS libraries, ensuring we adhere to the official guidelines for versioning. However, when we render a class obsolete (or for JavaScript - a property or argument), what is the recommended action? The clien ...

Enhance your photographic experience with the JavaScript Camera API on Android (Froyo

I have been attempting to utilize the JavaScript Camera API through the Android browser, as showcased at Google IO on Froyo. Despite having Froyo on my Nexus1, I am encountering difficulties accessing navigator.device and navigator.camera properties, bo ...

Elusive shadow fails to appear in ThreeJS scene

<style> body { margin: 0; } </style> <script async src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0267712f6f6d66776e672f716a6a6f716a6f717a333c343c71">[email protec ...

Conceal elements within a div using the 'elementFromPoint' function

In my HTML, I have a div that contains an icon and some text. I want to make it so that when I hover over the div with my mouse, only the div itself is visible to the 'elementFromPoint' function. How can I achieve this? Here is an example of th ...

Float a div within text to be positioned vertically

Is there a way to use only CSS to create an article that includes a featured quote section starting around 50px from the top? The section should be half the width of the page with text wrapping around it at the top and bottom. Currently, I am using the fl ...

Changes in an image element's transition can result in either resizing or shifting positions

When I apply an opacity transition to an img element as shown here, I notice that the size of the image changes or it appears to move at the start and end of the transition. Below is a simple CSS code for styling: img{ height:165px; width:165px; ...

Python script causing Bottle window.location.href to become unresponsive

I am working on a project to control a servo motor using buttons on a RaspberryPi web server. Python and Bottle are the languages and framework I am using. So far, my progress has been slow, as I can only manage to have the buttons redirect to '/false ...

Tips for arranging HTML elements in a horizontal line, even if they belong to different parent elements

My HTML document features a sticky header and footer, with a div below the header that sticks to it to eventually hold tabs above a form. I've been struggling to align the form vertically below this div. The issue arises because the tab div lacks a sc ...

Merge ReactCssTransitionGroup with React-route's Link to create smooth page transitions

React.js I'm facing an issue with the React.js code provided below. My goal is to set up the animation before transitioning to a new page using "React-router.Link" and ReactCSSTransitionGroup. Version: react: '15.2.1' react-addons-css-trans ...

Retrieve the HTML document and all its elements

Is there a method in Python to save an entire webpage with all its contents (images, css) to a local directory using a URL? Additionally, is it possible to update the local HTML file to reference the locally saved content? ...

Web Dialogue Dimensions: Adjusting the MDC-Web Dialog Width

When designing a dialog following Material Design guidelines, one issue that often arises is how to handle the width of the dialog on larger viewports such as tablets and desktops. Some sources suggest using increments of 56px for dialog width, but it&apos ...

Tips for wrapping the content of a <span> element within a <td> element

Can someone help me figure out how to wrap the content of a <span> tag that is inside a <td>? The style I have applied doesn't seem to be working. Here's the code snippet: <td style="white-space:nowrap;border:1px solid black"> ...

I am experiencing an issue where the repeat-x property on my background image is causing it

Currently, I'm facing an issue with a background image that has the repeat-x property. Oddly enough, it appears to be working properly on Windows OS but not on Mac. Whenever I access the website, there seems to be a significant amount of white space c ...

Sending a collection of text inputs from a web form and saving them in MongoDB

I have been attempting to store an array of strings from my HTML form into my database (MongoDB). Here's the HTML form for creating a new class: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

Locking Bootstrap 4.3 Navbar at the Page's Summit with a See-Through Effect

I have extensively researched and searched online for information before reaching out here. I hope my question is not redundant. My challenge lies in creating a static navbar at the top of my Bootstrap 4.3 page. Despite multiple attempts, it seems to elud ...