Including Modernizr JS library makes asp.net site's entire contents not render

Question

I am utilizing CSS3 to create rounded borders in my web app. I have created a blank asp.net application, I have a master page and one content page. The content page references the masterpage as expected and the masterpage is pretty much a standard out of the box masterpage. When I run page locally without modernizr things look fine in all browsers, however when I include the modernizr .js file reference within the masterpage's tags I get a blank html page with the background color that I have setup in my css file. Everything between the tags is not being rendered.

here is a css snippet that i have that uses the border-radius property.

#container {background:#444;width:860px;border:1px solid #FFF;border-radius: 30px 0px 30px 30px; margin:20px auto;padding:20px;}

here is my masterpage (you'll notice modernizr commented out)

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Site.Site" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Name</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style/style.css" media="all" />
<!-- <script src="script/modernizr.custom.51561.js" type="text/javascript" /> -->
</head>
<body>
<div id="container">
    <div id="header">
        <h1>Name</h1>
        <p> text
            </p>
    </div>
    <div id="nav">
        <ul>
            <li><a href="">Nav Link</a></li>
            <li><a href="">Nav Link</a></li>
            <li><a href="">Nav Link</a></li>
            <li><a href="">Nav Link</a></li>
        </ul>
    </div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>

    <div id="footer">
       Links
    </div>
</div>
</body>
</html>

And here is my content page

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Site._default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <form id="form1" runat="server">
        <div id="content">
            <div class="column">
            </div>
            <div class="column">
            </div>
            <div class="column">
            </div>
        </div>
    </form>
</asp:Content>

Hopefully that is not code overkill... I have tried multiple .js files from modernizr, the dev version, a custom version, the production version... all seem to produce the same results. Perhaps I'm not setting it up properly, I was under the impression modernizr was just an included library that you reference and then forget about it and it pretty much takes care of the rest. Perhaps there's more to it than that.

score 5 · Accepted Answer · edited May 23 '17 at 11:52

5

This is broken and won't work:

<script src="script/modernizr.custom.51561.js" type="text/javascript" />

You need this:

<script src="script/modernizr.custom.51561.js" type="text/javascript"></script>

This is a mistake that you'll only make once.

edited May 23 '17 at 11:52

Community

1
1

answered Aug 17 '11 at 17:37

thirtydot

224,678
48
389
349

Bingo I probably looked at that 100 times without seeing it. I wish VS would have marked that as incorrect syntax, coulda saved me a lot of extra poking around. – Dylan Hayes Aug 17 '11 at 17:42

Including Modernizr JS library makes asp.net site's entire contents not render

1 Answers1