CODEWITHSUNDEEP
cssasp.net-mvc-4twitter-bootstraplayout
MoonKnight
MoonKnight

Reputation: 23831

Style Sheet not being used Correctly

I am using Twitter's Bootstrap framework for a new ASP.NET (MVC) application. All it fine, but I have a problem with my Site.css file not being used correctly. I had recognized that this .css file was causing my navbar to have too big of a margin at the top:

enter image description here

The offending item is the 50px highlighted in the Chrome dialog. I looked in my Style.css and indeed the body padding-top was 50px. 

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

So I changed this to 

body {
    padding-top: 20px;
    padding-bottom: 20px;
}

But the problems remains and when I inspect the item it still says 50px in Site.css in the Chrome dialog. How do I update the Style.css so that the changes persist?

The code for the _Layout.cshtml file is:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        @String.Format("{0} - {1}", 
            ViewBag.Title, 
            VisasysNET.Utilities.Constants.Visasys)
    </title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="container">
        <div class="navbar navbar-default" role="navigation">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button"
                            class="navbar-toggle"
                            data-toggle="collapse"
                            data-target=".navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    @Html.ActionLink(VisasysNET.Utilities.Constants.Visasys,
                        "Index", "Home", null, new { @class = "navbar-brand" })
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li class="active">@Html.ActionLink("Home", "Index", "Home")</li>
                        <li>@Html.ActionLink("Consultancy", "Index", "Consultancy")</li>
                        <li>@Html.ActionLink("Products", "Index", "Products")</li>
                        <li>@Html.ActionLink("Our Clients", "Index", "OurClients")</li>
                        <li>@Html.ActionLink("About", "About", "Home")</li>
                        <li>@Html.ActionLink("Contacts", "Index", "Contacts")</li>
                    </ul>
                    @Html.Partial("_LoginPartial")
                </div>
            </div> <!--container-fluid-->
        </div> <!--navbar-->
        @RenderBody()
        <hr />
        <footer>
            <p>
                &copy;
                @String.Format("{0} - {1}",
                    DateTime.Now.Year,
                    VisasysNET.Utilities.Constants.Visasys)
            </p>
        </footer>
        @*</div>*@
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @RenderSection("scripts", required: false)

    </div>
</body>
</html>

Upvotes: 0

Views: 74

Answers (1)

Honorable Chow
Honorable Chow

Reputation: 3153

Sounds like a caching issue. Hold down CTRL and Press F5 in your browser.

Upvotes: 1

Related Questions