When I attempt to link the CSS file within the head or put it in a bundle, it won't render properly. However, if I use inline styles, everything works fine. The application is running locally with debug set to true on Web.config -
<compilation debug="true" targetFramework="4.5" />I'm puzzled as to what could be causing this issue. Am I overlooking something.. I have included my BundleConfig.cs, where I called
BundleConfig.RegisterBundles(BundleTable.Bundles);Global.asax.cs.
It's worth mentioning that when I try to manually retrieve the CSS file after loading the plain HTML page, I get an error stating that the path '/Content/site.css' was not found, even though the path looks correct to me locally:
System.Web.HttpExceptionPath '/Content/site.css' was not found.
System.Web.HttpException (0x80004005): Path '/Content/site.css' was not found.
at System.Web.HttpNotFoundHandler.ProcessRequest(HttpContext context)
at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()
at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)
I made adjustments to my Web.config file due to using Simple authentication.
<location path="~/Content" allowOverride="false">
<system.web>
<authorization>
<allow users="*"/>
</authorization>
</system.web>
</location>
Below is the project structure screenshot for reference:
Here is the content of my BundleConfig.cs:
using System.Web.Optimization;
namespace MyProjectNamespace
{
public static class BundleConfig
{
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
}
}
}
And here is the code in _Layout.cshtml:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
</head>
<body>
<div id ="accountbar">
MORE HTML IN HERE.
</div>
<br />
<div id ="loginform">
@RenderBody()
</div>
</body>
</html>
This is the content of site.css located in the Content directory:
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
#loginform {
background-color: #a4d4e6;
border: solid 1px #000;
}
#accountbar {
background-color: #778899;
}