style.css causing rendering problems

5 replies·opened Apr 3, 2020
A
azfarfarooqApr 3, 2020

Hi,
I am using Canvas template for a asp.net c# application.
I added the header and footer in a asp.net master page. All works fine. However, when i add reference of style.css to the master page, the page is rendered blank. If i remove style.css, page is rendered. Can you please help?

Thanks
Azfar

A
azfarfarooqApr 3, 2020

I am attaching the view-source of the webpage for your reference.

A
azfarfarooqApr 3, 2020
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="head1"><title>
	National Agriculture Development Co-operative Limited
</title><meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta name="author" content="SemiColonWeb" /><meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Stylesheets
	============================================= -->
    <link rel="stylesheet" href="../css/googlefont.css" type="text/css" /><link rel="stylesheet" href="../css/bootstrap.css" type="text/css" /><link rel="stylesheet" href="../css/swiper.css" type="text/css" /><link rel="stylesheet" href="../css/dark.css" type="text/css" /><link rel="stylesheet" href="../css/font-icons.css" type="text/css" /><link rel="stylesheet" href="../css/animate.css" type="text/css" /><link rel="stylesheet" href="../css/magnific-popup.css" type="text/css" /><link rel="stylesheet" href="../css/responsive.css" type="text/css" /><link href="../css/style.css" rel="stylesheet" />
    <!-- JQuery
	============================================= -->

    <script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript" src="../js/plugins.js"></script>
    <script type="text/javascript" src="../js/functions.js"></script>

</head>
<body id="body" class="stretched">

    <!-- Document Wrapper
	============================================= -->
    <div id="wrapper" class="clearfix">

        <!-- #header starts -->
        <header id="header">

            <div id="header-wrap">

                <div class="container clearfix">

                    <div id="primary-menu-trigger"><i class="icon-reorder"></i></div>

                    <!-- Logo
					============================================= -->
                    <div id="logo">
                        <a href="index.html" class="standard-logo" data-dark-logo="../images/logo-dark.png">
                            <img src="../images/logo.png" alt="Canvas Logo" /></a>
                        <a href="index.html" class="retina-logo" data-dark-logo="../images/logo-dark@2x.png">
                            <img src="../images/logo@2x.png" alt="Canvas Logo"></a>
                    </div>
                    <!-- #logo end -->

                    <!-- Primary Navigation
					============================================= -->

                    <nav id="primary-menu" class="sub-title">
                        <ul>
                            <li class="current"><a href="index.html">
                                <div>Home</div>
                                <span>Lets Start</span></a>
                                <ul>
                                    <li><a href="index-corporate.html">
                                        <div>Home - Corporate</div>
                                    </a>
                                        <ul>

                                            <li>
                                                <a href="index-corporate-4.html">
                                                    <div>Corporate - Layout 4</div>
                                                </a>

                                            </li>
                                        </ul>
                                    </li>
                                    <li><a href="index-portfolio.html">
                                        <div>Home - Portfolio</div>
                                    </a>
                                        <ul>

                                            <li><a href="index-portfolio-3.html">
                                                <div>Portfolio - Masonry</div>
                                            </a></li>
                                            <li><a href="index-portfolio-4.html">
                                                <div>Portfolio - AJAX</div>
                                            </a></li>
                                        </ul>
                                    </li>

                                </ul>
                                </li>
                        </ul>

                    </nav>
                </div>
            </div>
        </header>
        <!-- #header end -->

        <!-- #Content place holder start  -->
        <div>
            

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

        </div>
        <!-- #Content place holder end  -->

        <!-- #Footer starts -->

        <footer id="footer" class="dark">

            <div class="container">

                <!-- Footer Widgets
				============================================= -->
                <div class="footer-widgets-wrap clearfix">

                    <div class="col_two_third">

                        <div class="col_one_third">

                            <div class="widget clearfix">

                                <img src="../images/footer-widget-logo.png" alt="" class="footer-logo"/>

                                <p>We believe in <strong>Simple</strong>, <strong>Creative</strong> & <strong>Flexible</strong> Design Standards.</p>

                                <div style="background:url('../images/world-map.png') no-repeat center center; background-size: 100%;">
                                    <address>
                                        <strong>Headquarters:</strong>

                                        795 Folsom Ave, Suite 600

                                        San Francisco, CA 94107

                                    </address>
                                    <abbr title="Phone Number"><strong>Phone:</strong></abbr>
                                    (91) 8547 632521

                                    <abbr title="Fax"><strong>Fax:</strong></abbr>
                                    (91) 11 4752 1433

                                    <abbr title="Email Address"><strong>Email:</strong></abbr>
                                    info@canvas.com
                                </div>

                            </div>

                        </div>

                        <div class="col_one_third">

                            <div class="widget widget_links clearfix">

                                <h4>Blogroll</h4>

                                <ul>
                                    <li><a href="https://codex.wordpress.org/">Documentation</a></li>
                                    <li><a href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a></li>
                                    <li><a href="https://wordpress.org/extend/plugins/">Plugins</a></li>
                                    <li><a href="https://wordpress.org/support/">Support Forums</a></li>
                                    <li><a href="https://wordpress.org/extend/themes/">Themes</a></li>
                                    <li><a href="https://wordpress.org/news/">WordPress Blog</a></li>
                                    <li><a href="https://planet.wordpress.org/">WordPress Planet</a></li>
                                </ul>

                            </div>

                        </div>

                        <div class="col_one_third col_last">

                            <div class="widget clearfix" style="margin-bottom: -20px;">

                                <div class="row">

                                    <div class="col-lg-6 bottommargin-sm">
                                        <div class="counter counter-small"><span data-from="50" data-to="15065421" data-refresh-interval="80" data-speed="3000" data-comma="true"></span></div>
                                        <h5 class="nobottommargin">Total Downloads</h5>
                                    </div>

                                    <div class="col-lg-6 bottommargin-sm">
                                        <div class="counter counter-small"><span data-from="100" data-to="18465" data-refresh-interval="50" data-speed="2000" data-comma="true"></span></div>
                                        <h5 class="nobottommargin">Clients</h5>
                                    </div>

                                </div>

                            </div>

                            
                            <div class="widget clearfix" style="margin-bottom: -20px;">

                                <div class="row">

                                    <div class="col-lg-6 clearfix bottommargin-sm">
                                        <a href="#" class="social-icon si-dark si-colored si-facebook nobottommargin" style="margin-right: 10px;">
                                            <i class="icon-facebook"></i>
                                            <i class="icon-facebook"></i>
                                        </a>
                                        <a href="#"><small style="display: block; margin-top: 3px;"><strong>Like us</strong>

                                            on Facebook</small></a>
                                    </div>
                                    <div class="col-lg-6 clearfix">
                                        <a href="#" class="social-icon si-dark si-colored si-rss nobottommargin" style="margin-right: 10px;">
                                            <i class="icon-rss"></i>
                                            <i class="icon-rss"></i>
                                        </a>
                                        <a href="#"><small style="display: block; margin-top: 3px;"><strong>Subscribe</strong>

                                            to RSS Feeds</small></a>
                                    </div>

                                </div>

                            </div>

                        </div>

                    </div>
                    <!-- .footer-widgets-wrap end -->

                </div>

                <!-- Copyrights
			============================================= -->
              
                <!-- #copyrights end -->
                </div>
        </footer>

        <!-- #Footer ends -->

    </div>

    <!-- #wrapper end -->

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"0fc99bc2a86e43d0ab7d78718d58f845"}
</script>
<script type="text/javascript" src="http://localhost:51397/dca46156859b4c20b414502757c521f6/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>
S
SemiColonWebSTAFFApr 3, 2020

Hello,

The issue appears to be with a JS Conflict. Make sure that you use the Codes in the Default Format and order as provided in the Package/HTML Folder. Additionally, you can check more details about the JS issue in your Browser’s Developer Console. So fixing the JS issue will automatically fix this error. Meanwhile, you can add the .no-transition Class to the <body> tag to disable the Page Loading Transition.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

A
azfarfarooqApr 4, 2020

Thanks a lot. The issue was with the JS. I had put JS files in the head. When i put them in the body, everything worked like a charm.

Amazing template. Great work guys.

S
SemiColonWebSTAFFApr 4, 2020

Hello,

Awesome! Very Happy to Help! Glad that your issues were resolved.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard