Why does my webform page not detect CSS file? - html

Question

No matter what I do it won't detect the css file.
<link rel="stylesheet" type="text/css" href="CSS/customStyles.css" runat="server" />
I have tried to place it inside the contentplaceHolder Head both in master page and child page, i tried set path multiple ways,
<link rel="stylesheet" type="text/css" href="~/CSS/customStyles.css" runat="server" />
<link rel="stylesheet" type="text/css" href="/CSS/customStyles.css" runat="server" />
<link rel="stylesheet" type="text/css" href="CSS/customStyles.css" runat="server" />
Yet nothing works. I also read something about formvalidation and even tried to add on web.config
<location path="CSS">
<system.web>
<authorization>
<allow users="*" />
</authorization>
</system.web>
and still nothing... Whhy does it not detect the css file ??
EDIT
This is directory
UPDATE
Here's an update, I tried to create a css file on main directory and it worked, so the problem is the css file won't be detected if it's inside a directory...
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
EDIT
Here's what seems to cause the problem
when i go to localhost:port/CSS/customStyles.css only this css appears
body {
}
.hidden {
display:none;
}
.customActive {
background-color:#cecee8;
}
.ctmHover:hover{
background-color:#cecee8;
}
However the file has all this code
body {
}
.hidden {
display: none;
}
.customActive {
background-color: #cecee8;
}
.ctmHover:hover {
background-color: #cecee8;
}
.Grid {
background-color: #fff;
margin: 5px 0 10px 0;
border: solid 1px #525252;
border-collapse: collapse;
font-family: Calibri;
color: #474747;
}
.Grid td {
padding: 2px;
border: solid 1px #c1c1c1;
}
.Grid th {
padding: 4px 2px;
color: #fff;
background: #363670 url(Images/grid-header.png) repeat-x top;
border-left: solid 1px #525252;
font-size: 0.9em;
}
.Grid .alt {
background: #fcfcfc url(Images/grid-alt.png) repeat-x top;
}
.Grid .pgr {
background: #363670 url(Images/grid-pgr.png) repeat-x top;
}
.Grid .pgr table {
margin: 3px 0;
}
.Grid .pgr td {
border-width: 0;
padding: 0 6px;
border-left: solid 1px #666;
font-weight: bold;
color: #fff;
line-height: 12px;
}
.Grid .pgr a {
color: Gray;
text-decoration: none;
}
.Grid .pgr a:hover {
color: #000;
text-decoration: none;
}
.custom-modal-header {
background: #b0d4e3; /* Old browsers */
background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
border-radius: 15px 15px 0px 0px;
color: white;
}
.custom-modal-footer {
background: #b0d4e3; /* Old browsers */
background: -moz-linear-gradient(top, #b0d4e3 0%, #88bacf 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #b0d4e3 0%,#88bacf 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #b0d4e3 0%,#88bacf 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0d4e3', endColorstr='#88bacf',GradientType=0 ); /* IE6-9 */
border-radius: 0px 0px 15px 15px;
color: white;
}
.custom-modal-confirm-btn {
background-color: #98c4d7;
color: white;
}
.custom-modal-confirm-btn:hover {
background-color: #000000;
color: white;
}
.custom-modal-cancel-btn {
font-weight: bold;
}
.custom-modal-cancel-btn:hover {
background-color: #6099ca;
color: white;
font-weight: bold;
}
.chkChoice label {
margin-right: 20px;
margin-top: 15px;
margin-bottom: 15px;
margin-left: 5px;
color: #142658;
border-color: #142658;
border-radius: 50px;
}
.chkChoice input {
padding-left: 20px;
margin-left: 20px;
}

Answer 1

Please try using base path:
<link rel="stylesheet" type="text/css" href="<%= HttpContext.Current.Request.ApplicationPath %>/CSS/customStyles.css" runat="server" />

Answer 2

I tried creating a new css file on the same folder and posting the code in there and it worked. I have more code on other CSS file and i checked several times everything is well formatted and I'm still trying to figure out what causes the code to not be read, so as for now the solution is just place the code in a different empty css file

Answer 3

I have the same issue and looks like the only way is to set an "absolute" path in the scope of the project.
If project looks like this:
CSS will not load by path:
<link rel="stylesheet" type="text/css" href="BenchmarsStyles.css">
It works only:
<link rel="stylesheet" type="text/css" href="/ModelPortfolio/UserControls/BenchmarsStyles.css">
Means, it should include all directories from the root of the project.
I hope it helps.