CSS @Styles.Render not rendering stylesheet

Question

I've applied a css stylesheet to my view and it is not rendering when I view it. What's the problem here:

Edit: Works in Firefox 17, does not work in IE10 (something to do with my compatibility view? Not sure how to fix)

Master:

@using System.Web.Optimization

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>User_Master</title>
    @Styles.Render("~/Content/Styles.css")
</head>
<body>
    <header>
        <p>header</p>
    </header>
    <nav>
        @Html.Partial("~/Views/Shared/User_Nav.cshtml")
    </nav>
    <section>
        @RenderBody()
    </section>
</body>
</html>

Styles.css

header {
    border-color: #0094ff;
    border-bottom-right-radius:10px;
    border-top:hidden;
    border-left:hidden;
    border-bottom:solid;
    border-right:solid;
    box-shadow:2px 2px;
}

Home

@{
    ViewBag.Title = "Home";
    Layout = "~/Views/Shared/User_Master.cshtml";
}

<h2>Home</h2>

You're missing a double-quote in `@Styles.Render(~/Content/Styles.css")`; I'm not sure if this just a typo in your question, or if it's your actual issue. — vee, Jul 01 '13 at 15:21

score 0 · Accepted Answer · answered Jul 01 '13 at 16:31

There seem to be two parts to the problem.

CSS

One part of the problem is related to invalid CSS. For example, border-top is the shorthand declaration for a combination of style, width and colour:

border-top: [width style colour]

With this in mind, I would change your CSS as follows:

header 
{
    border: 2px solid #0094ff; /* width style colour */
    border-bottom-right-radius: 10px;
    border-top-style: hidden;
    border-left-style: hidden;
    box-shadow: 2px 2px 0px #000; /* x-offset y-offset blur colour */
}

IE / Compatibility Mode

If IE is coming through in compatibility mode, you're probably rendering using the IE8 (or older) engine. Unfortunately these do not understand HTML5, so things like the <header /> elements and border-radius and box-shadow CSS declarations are ignored. There are a couple of things you can try to fix this:

Add <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" /> to your <head /> element. This will tell IE that you want to use the latest rendering engine. See this page for more information on this.
Include a JavaScript library like HTML5Shiv (which is also included in the excellent Modernizr library as well). This allows older versions of Internet Explorer to at least recognise HTML5 elements like <header />. Be aware that it won't add CSS3 support though; things like border-radius will not work, but at least you'll get normal borders.

The css I'd already fixed to what you have while I was waiting for an answer. It still wasn't working. The IE/Compatibility mode point 1 fixed the problem for me. Would you mind explaining/redirecting me to some resources which explains how to build the http-equiv and content attribs of the meta tag? — litterbugkid, Jul 02 '13 at 10:51
This might explain the meta tag a bit better: http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge#answer-6771584 — vee, Jul 02 '13 at 12:39

CSS @Styles.Render not rendering stylesheet

1 Answers1