My Spring MVC application is experiencing difficulties in loading CSS files

My web application is built on Spring MVC and runs on Tomcat 7.0. We have also implemented the Tiles framework in our application.

Below is the snippet of code for the layout page where I have included CSS and javascript files:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<%@ page contentType="text/html; charset=utf-8" language="java"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Application</title>

        <!-- CSS Files -->
        <link type="text/css" href="<c:url value='/resources/css/themes/base/jquery.ui.all.css'/>">
        <link type="text/css" href="<c:url value='/resources/css/styles.css'/>" />

        <!-- Javascript Files -->       
        <script src="<c:url value='/resources/scripts/jquery/jquery-1.7.1.js'/>"></script>
        <script src="<c:url value='/resources/scripts/jquery/ui/jquery.ui.core.js'/>"></script>
        <script src="<c:url value='/resources/scripts/jquery/ui/jquery.ui.widget.js'/>"></script>
        <script src="<c:url value='/resources/scripts/jquery/ui/jquery.ui.button.js'/>"></script>
        <script src="<c:url value='/resources/scripts/common.js'/>"></script>

        <script>
            $(function() {
                $("input:submit, a, input:button", ".buttonDiv").button();
                $("a", ".buttonDiv").click(function() {
                    return false;
                });

            });
        </script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <tiles:insertAttribute name="header">
                    <tiles:putAttribute name="menu"
                        value="/WEB-INF/jsps/common/menu.jsp" />
                </tiles:insertAttribute>
            </div>
            <div id="body">
                <tiles:insertAttribute name="body" />
            </div>
            <div id="footer">
                <tiles:insertAttribute name="footer" />
            </div>
        </div>
    </body>
</html>

The javascript files are loading correctly, but there seems to be an issue with loading the CSS files.

Additionally, here is an excerpt from my Spring configuration file:

    <!-- Handles HTTP GET requests for /resources/** by efficiently serving 
    up static resources in the ${webappRoot}/resources/ directory -->
<mvc:resources location="/resources/" mapping="/resources/**" />

I am currently using IE7 browser for testing purposes and facing difficulties. Any advice or help regarding the CSS file inclusion would be highly appreciated.

Answer №1

consider using this code snippet to include your css file

<link href="../../Content/Site.css" rel="stylesheet" type="text/css"  />

Answer №2

When referencing CSS, image, or script files in a JSP file, use the following line:

<link href="${pageContext.request.contextPath}/resources/css/xxxx"
    rel="stylesheet">  //xxxx represents the specific resource
<link href="${pageContext.request.contextPath}/resources/css/jquery-ui.css" rel="stylesheet">

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

Customize Bootstrap 4 borders within a row

I am currently facing an issue with my code, where there is a border at the bottom of every row. Click here to view the code Unfortunately, I have noticed that the border at the bottom of each row does not extend across the full width. This occurs even wh ...

Automatically log out user upon closing the browser window or tab

Currently in the process of creating a chat web application, I encountered an issue. It seems that if a user closes the tab or browser without clicking the 'logout' button, the state in the database will still show them as "online". I am using CO ...

Changing in height by utilizing javascript's style.height animation

When attempting to adjust the height property using JavaScript instead of jQuery, a challenge arises. The issue lies in the inability to reset the height back to zero after setting it to the scrollHeight of the element. The following is the JavaScript cod ...

The background failed to display (potentially due to a hovering function)

I encountered an issue with a div that has a background image. Upon loading the page, the background image fails to display initially. However, when I hover over the div and then move my mouse elsewhere (due to a specific function described below), the bac ...

Conceal content on a single page exclusively

body.943 .ish-button-small {display:none;} I'm looking to selectively hide the element ".ish-button-small" on a specific page identified by the id 943. What would be the most effective approach to achieve this? ...

Webix UI - Struggling to create dynamically responsive components during screen resizing

Can anyone guide me on how to make my Webix UI control responsive in the free version available at ? It seems to be acting unpredictably due to the AngularJS integration code I'm using. I have attempted various solutions like media queries, redraw, a ...

"Rearranging the Firefox ghost image by dragging and dropping it

My drag and drop game is working perfectly on all browsers except for Firefox. In Firefox, the ghost image that appears when an item is dragged seems to be positioned very far away from the cursor. Although the ghost image can still be seen on the page, it ...

Enhance D3 Version 6 Stacked Bar Chart with Spacing and Interactive Features

My bar chart lacks the spacing between bars that I intended to achieve, and the interactive tooltip doesn't show up when hovering over the bars. I could use some assistance with this. The purpose is to display the value of a specific color when hoveri ...

Content within a div that is floated left

The scenario at hand is: HTML Structure: <div id="main"> <div id="a"></div> <div id="b">Some Text</div> </div> CSS Styles: #a{ float:left; width:800px; height:150px; background-color:#CCC; } ...

How to center an inline element using CSS and a background color

I'm struggling to center a block of text in a div with fixed dimensions both horizontally and vertically. I also want the text to have a semi-transparent black background and be able to stretch across two lines if needed. The issue I'm facing is ...

Guide on programmatically integrating images into the user interface in ASP.NET from the code behind, while ensuring that all styles have been pre-defined in the .as

I have created a static aspx page with the following code: <div class="container"> <div class="contain" id="subdiv" runat="server"> <input type="checkbox" id="cb1" runat="server" /> <label for="cb1"> <img sr ...

Tips on positioning a div based on the screen dimensions

In my table, there is an icon that reveals a chart as a popup when hovered over. This div is where the chart is displayed: <div id="chart-outer" style="@style" class="popup-chart close"> <h2 id="charttitle&q ...

Dynamic header that adjusts to fit window size fluctuations

I'm currently working on a website and trying to make it responsive by adjusting to changes in the browser window size. I'm having trouble changing the header height based on the window size unlike how it works for my pictures in CSS: #l ...

Prevent CSS from affecting child tables

Here is my CSS and HTML setup: .comTable { width: 95%; cellpadding: 2px; margin: auto; border-collapse: collapse; } .comTable td { text-align: left; } .comTable td:first-child { text-align: right; wi ...

Is it possible to activate numerous hover effects on links by hovering over a div?

How can I trigger multiple hover effects simultaneously when hovering over my main div? I'm struggling to figure out how to make the line animate on all three links at the same time. Is it possible to achieve this using only CSS or do I need to use Ja ...

Creating a design with three parallel bars in CSS

For my webpage, I wanted to add an extended flag at the top by creating three horizontal stripes: CSS #main1 div{ width: auto; height: 20px; margin: 0px HTML <div id="main1"> <div style="background-color:red;"></div> <div style="ba ...

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

What is the process for assigning a value to the body in a div element?

Within a div, there is a body element structured like this: <div id = "TextBox1"> <iframe id = "TextBox1_1"> #document <html> <head></head> <body></body> </html> </iframe> </div> I have attempte ...

How can I ensure that a button remains fixed at the bottom of a Material UI React Component?

I am currently working on developing a layout for a web application, and I have encountered an issue that I am struggling to resolve. The structure of my grid is as follows: https://i.sstatic.net/TEU2a.png My goal is to ensure that each section inside t ...

Tips for stopping a flex:1 div from expanding to accommodate its abundant content

I'm facing a situation where I need to create two columns, one fixed at 150px and the other filling up the remaining space with scroll functionality for overflow content. Despite trying to use flexbox for this layout, the second column keeps expanding ...