This is a simple website in ASP.NET with C# using VS 2010. I have following directory structure for this project:
The starting page is Default.aspx and it loads perfectly. But when I open page Interface/SystemAdminLogin.aspx from Default page, it loads with no CSS styles. I have imported CSS style sheet in Master Page. Here is how I am referencing MasterPage file in both .aspx files:
Default.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
SystemAdminLogin.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="SystemAdminLogin.aspx.cs" Inherits="_Default" %>
I dont see any mistake with my code but why Page in Interface folder is not loading CSS styles??
Please help.
Here is the master page code where i am importing css file:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Facial Recognition Bank System</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="Styles/style.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" media="screen" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head>
And here is the part of CSS file code:
body {
margin: 0;
padding: 0;
background: #fff url(../images/img01.jpg) repeat-x left top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000;
}
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
The stylesheets included in your master page are using relative paths.
Specify your stylesheet links with runat=server and prefix them with the virtual web root path (~):
<link href="~/Styles/style.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" media="screen" runat="server" />
OR:
<link href="/Styles/style.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" media="screen" runat="server" />
But keep in mind that the first option is recommended. The second will not work when you publish your site in a virtual directory.
After last comment…
The image URL’s in CSSs should be updated as well, in order to not use relative paths or do any path traversal (../).
background: #fff url(images/img01.jpg) repeat-x left top;
For this option you will need to move the images folder inside the Styles folder (it’s a good practice to do so).
Final update:
Looks like that the head element also needs to be runat=server in order for ASP.NET relative paths (~) to work within link elements with runat=server.
Method 2
This works for me in my master pages:
<asp:content ID="xContent" ContentPlaceHolderID="headContent" runat="server"> <link rel="stylesheet" type="text/css" href="<%=Request.ApplicationPath%>Folder/Folder/Filename.css" rel="nofollow noreferrer noopener" /> </asp:Content>'
Method 3
Try with (~ in your path):
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Facial Recognition Bank System</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <link href="~/Styles/style.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" runat="server" rel="stylesheet" type="text/css" media="screen" /> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> </head>
Method 4
I found that it was ASPNETCORE_ENVIRONMENT set to Development for debug. And in the _Layout.cshtml I had the asp-append-version missing.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" />
<link rel="stylesheet" href="~/css/site.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" asp-append-version="true" />
</environment>
I fixed that and it was all good again:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - SALUS UAV</title>
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" />
<link rel="stylesheet" href="~/css/site.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" asp-append-version="true" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" rel="nofollow noreferrer noopener" rel="nofollow noreferrer noopener" asp-append-version="true" />
</environment>
Method 5
Add runat="server" to the head attribute and also ensure the link targets the root as in (“~/path to css”)
<head runat="server">
<title>Page Title Here</title>
<link href="~/css/main.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server" />
</head>
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0