Menu
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="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;
}
557
The problem may be that your browser is caching the CSS file. If you're debugging with Edge, you can open the F12 tools and click on the Network tab. At the top, you'll find a button to "always refresh from server." Turn this on, and files won't be cached.
Make sure the link tag is at the right place If you put the <link> tag inside another valid header tag like <title> or <script> tag, then the CSS won't work. The external style CAN be put inside the <body> tag, although it's recommended to put it in the <head> tag to load the style before the page content.
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="stylesheet" type="text/css" media="screen" runat="server" />
OR:
<link href="/Styles/style.css" 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.
158
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
