More in this section

Forums / General Discussions / Anyone using Modernizr?

Anyone using Modernizr?

4 posts, 0 answered
  1. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    17 Nov 2011
    Link to this post
    I am looking for tips on using this library with Sitefinity.  I tried to add the it to my master page with a normal script tag, but it does not seem to be working.

    I wanted to use it for the shim support on html 5 tags with IE.  I also just want to start learning some of it's other features.

    Here is what my masterpage looks like
    <%@ Master Language="C#" %>
     
    <!DOCTYPE html>
    <script runat="server">
     
    </script>
     
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="/Scripts/modernizr.dev.js" />
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <!-- Wrapper -->
            <div id="Wrapper">
                <header>
                    <div class="content-wrapper">hello
                        <asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server" />
                    </div>
                </header>
                <!-- Content Wrapper -->
                <div>
                    <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server" />
                </div>
                <!-- End Content Wrapper -->
                <footer>
                    <asp:ContentPlaceHolder ID="FooterContentPlaceHolder" runat="server" />
                </footer>
            </div>
            <!-- End Wrapper -->
        </form>
    </body>
    </html>

    The page loads, but I am not sure where to head from here.  Without the script the header tag is getting styled correctly in IE 9 and Firefox 7, but with the script it is no longer getting styled.

    The script path is correct so at least I know that is getting loaded.  I grabbed the development version so that I can be assured that it contains all the features that I may or may not use.  I know in production I would want to custom build for better optimization.

    Edit:  My css is styling the header as such.

    header
    {
        display: block;
        height: 90px;
        border: 4px solid #978764;
        border-width: 0 0 4px 0;
    }


  2. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    17 Nov 2011
    Link to this post
    Stacey,

    I've modified your code a little, try this one out.

    Note the difference on the script tag, that was the main issue that was causing problems. Also, I changed the CSS a little bit as HTML5 headers are block level elements by default. You shouldn't need to explicitly set them to "display: block;".

    Hope this helps!

    <%@ Master Language="C#" %>
      
    <!doctype html>
    <html class="no-js" lang="en">
    <head runat="server">
        <title></title>
        <script src="/Scripts/modernizr-2.0.6.min.js"></script>
         
        <style>
            header
            {
                height: 90px;
                border: 4px solid #978764;
                border-width: 0 0 4px 0;
            }
        </style>
    </head>
    <body>
        <form runat="server">
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <!-- Wrapper -->
            <div id="Wrapper">
                <header>
                    <div class="content-wrapper">hello
                        <asp:ContentPlaceHolder ID="HeaderContentPlaceHolder" runat="server" />
                    </div>
                </header>
                <!-- Content Wrapper -->
                <div>
                    <asp:ContentPlaceHolder ID="MainContentPlaceHolder" runat="server" />
                </div>
                <!-- End Content Wrapper -->
                <footer>
                    <asp:ContentPlaceHolder ID="FooterContentPlaceHolder" runat="server" />
                </footer>
            </div>
            <!-- End Wrapper -->
        </form>
    </body>
    </html>
  3. Stacey
    Stacey avatar
    291 posts
    Registered:
    18 Oct 2012
    10 Jan 2012
    Link to this post
    Tim,

    Thanks for the advice.  That seems to work.  Why would adding the script type affect it from working?

    "display:block" is being set because it is not the default behavior in IE 7 or IE 8.
  4. Tim
    Tim avatar
    258 posts
    Registered:
    22 Jun 2011
    10 Jan 2012
    Link to this post
    Stacey,

    It's not the "type" that was breaking it, it was the self closing script tag. I replaced it with one that ended in </script> and it fixed the issue. I didn't include the "type" at all because when using the HTML 5 doctype, "type" is optional. Browsers should default to Javascript when they see the <script> tag.

    The default behavior you stated is correct. I suggest using something like this in your CSS file. It's from the HTML5 boilerplate.

    /* =============================================================================
       HTML5 display definitions
       ========================================================================== */
     
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    audio:not([controls]) { display: none; }
    [hidden] { display: none; }

4 posts, 0 answered