ASP.NET Not loading CSS files

I have a problem. I have an asp.net web form with a CSS file linked in.. The web form is connected with a master page.


Master page has (header, footer, and main CSS files)
Web form page has (product-grid CSS file)

The header, footer, and main CSS files are loading successfully in the web form page but, the product-grid CSS which is linked in inside the web form head tag unlike the other CSS files is not loading at all.

*I tried to look for a solution here before I submit my question but, no quest has solved my issue.*

Internal styling works


Master page head tag
<head runat="server">
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Required meta tags -->

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<!-- Bootstrap CSS -->

<!-- Needed CSS files -->
<!-- main CSS -->
<link href="/assets/css/main/main.css" rel="stylesheet" type="text/css">
<!-- Header and Footer CSS file-->
<link href="/assets/css/main/HeadFoot.css" rel="stylesheet" type="text/css">

<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
<!-- Needed CSS files -->

<!-- Jquery -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<!-- Font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" />

<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="/assets/images/favicon_red_64x64.png" />

<title>
    <asp:ContentPlaceHolder ID="title" runat="server"></asp:ContentPlaceHolder>
</title>
</head>

web form head tag (content placeholder cuz of master page)
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<!-- prodcuts grid -->
<link href="../assets/css/main/products-grid.css" rel="stylesheet" type="text/css" />
</asp:Content>

2 answers

  • answered 2021-02-21 04:49 Robert McKee

    The link is relative to the page that it is included in, not from the master page itself, but if your links in your master page work, but the link in your content page does not, then you likely have a relative page reference problem. You need to remove the .. from <link href="../assets/css/main/products-grid.css" rel="stylesheet" type="text/css" /> so that it will have the same relative path as the ones included in your master page.

    Better yet, use the application relative syntax everywhere for css:

    <link href="~/assets/css/main/products-grid.css" rel="stylesheet" type="text/css" />

  • answered 2021-02-21 05:39 Omar

    The href link for the unloading CSS should be like this

    <link href="/assets/css/main/products-grid.css?Version=1" rel="stylesheet" type="text/css" />