ASP.NET - HTML page looks different when started by Visual Studio then started outside of it
https://stackoverflow.com/questions/11588124
-
22-06-2021 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
I am not the best with ASP.NET, but I am using it for an authentication back-end and RESTful Web API (as I know enough C# to be dangerous).
I have a website built strictly in HTML, CSS, and JS. It looks fantastic outside when started directly with any popular browser (chrome, IE, firefox). I want to use some of the functionality of ASP.NET within the this website, and have it be the front-end to my web application. I simply dragged and dropped the HTML, CSS, and JS folders (including all images, etc.) into my ASP.NET project, and when I preview in browser from visual studio, the entire HTML layout is garbled and everything just doesn't look the same.
I added permissions for unauthourized users to access the pages, css folders, and the js folder in Web.config.
Any idea on why this would happen? Does ASP.NET render HTML/CSS differently during build than just viewing it directly through the browser?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Site Name » Awesome Tagline Here</title>
<link rel="stylesheet" href="css/base.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/red.css" type="text/css" media="all" />
<link rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico" />
<script src="js/modernizr.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/colorbox.js" type="text/javascript"></script>
<script src="js/flexslider.js" type="text/javascript"></script>
<script src="js/livevalidation.js" type="text/javascript"></script>
<script src="js/twitter.js" type="text/javascript"></script>
<script src="js/easing.js" type="text/javascript"></script>
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<section id="wrapper">
<section class="shell">
<!-- Header -->
<header>
<h1 id="logo"><a href="home.html" class="notext">Name Of site</a></h1>
<nav>
<ul class="main-nav">
<li class="current"><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li>
<a href="services.html">Services</a>
<ul>
<li><a href="services.html">Service Page 1</a></li>
<li><a href="services.html">Service Page 2</a></li>
<li>
<a href="services.html">Service Page 3</a>
<ul>
<li><a href="services.html">Service Page 1</a></li>
<li><a href="services.html">Service Page 2</a></li>
<li><a href="services.html">Service Page 3</a></li>
<li><a href="services.html">Service Page 4</a></li>
</ul>
</li>
<li><a href="services.html">Service Page 4</a></li>
</ul>
</li>
<li><a href="projects.html">Projects</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<ul class="socials">
<li class="facebook"><a href="#">Facebook</a></li>
<li class="twitter"><a href="#">Twitter</a></li>
<li class="rss"><a href="#">RSS</a></li>
</ul>
</nav>
</header>
<!-- End Header -->
</section>
<section id="large-slider">
<ul class="slides">
<li>
<img src="css/images/home-slide1.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
<li>
<img src="css/images/home-slide2.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
<li>
<img src="css/images/home-slide3.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
<li>
<img src="css/images/home-slide1.jpg" alt="" />
<section class="text">
<h1><span>Ma quande</span> lingues coales</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim.</p>
<a href="#" class="button">View More</a>
</section>
</li>
</ul>
</section>
<section class="shell">
<section class="about-row">
<h2 class="section-head"><a href="about.html" class="more">More Info</a> <span><span>More</span> About Us</span></h2>
<section class="thumbs">
<img src="css/images/th-about1.jpg" alt="" />
<img src="css/images/th-about2.jpg" alt="" />
<img src="css/images/th-about3.jpg" alt="" />
<img src="css/images/th-about4.jpg" alt="" />
</section>
<section class="text">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut</p>
</section>
</section>
<section class="projects-row">
<h2 class="section-head"><a href="projects.html" class="more">More Projects</a> <span><span>Latest</span> Projects</span></h2>
<ul class="thumbs">
<li>
<a href="project.html"><img src="css/images/th-home1.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
<li>
<a href="project.html"><img src="css/images/th-home2.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
<li>
<a href="project.html"><img src="css/images/th-home3.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
<li>
<a href="project.html"><img src="css/images/th-home4.jpg" alt="" /></a>
<h4>Lorem ipsum dolor <span>sit amet</span></h4>
<p><a href="#">CASE STUDIES</a> <span>/</span> <a href="#">Entertainment</a> <span>/</span> <a href="#">Featured</a> <span>/</span> <a href="#">Website</a></p>
</li>
</ul>
</section>
<section class="clients-row">
<h2 class="section-head"><a href="#" class="more">View More</a> <span><span>Our</span> Clients</span></h2>
<ul>
<li><a href="#"><img src="css/images/client1.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client2.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client3.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client4.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client5.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client6.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client7.png" alt="" /></a></li>
<li><a href="#"><img src="css/images/client8.png" alt="" /></a></li>
</ul>
</section>
<section class="row">
<section class="half">
<h2 class="section-head"><span><span>We</span> Hire</span></h2>
<h4>SALES MARKETING CONSULTANT</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">More</a></p>
<h4>ART DIRECTOR</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <a href="#">More</a></p>
</section>
<section class="half">
<h2 class="section-head"><span><span>Our</span> Services</span></h2>
<ul class="left">
<li><a href="services.html">Advertising</a></li>
<li><a href="services.html">Brand Identity Design</a></li>
<li><a href="services.html">Business Planning</a></li>
<li><a href="services.html">Startup Planning</a></li>
<li><a href="services.html">Campaign Planning</a></li>
</ul>
<ul class="right">
<li><a href="services.html">Online Advertising Services</a></li>
<li><a href="services.html">Website Architecture Design</a></li>
<li><a href="services.html">Interactive Design</a></li>
<li><a href="services.html">Game Design</a></li>
<li><a href="services.html">Development</a></li>
</ul>
</section>
</section>
<h2 class="bottom-text">“Eat your <strong>betting money</strong>, but don't bet your <strong>eating money</strong>.”</h2>
</section>
<section id="footer-push"></section>
</section>
<!-- Footer -->
<footer>
<section class="shell">
<section id="to-top">
<a href="#">Up</a>
<span class="overlay"></span>
</section>
<section class="twitter-feed">
<h5>Latest Tweets</h5>
<section id="tweets"></section>
</section>
<section class="about-box">
<h5>Tested on All Browsers</h5>
<p>Find out more theme features <a href="#">Here</a></p>
<img src="css/images/browsers.png" alt="" />
</section>
<section class="contact-box">
<h5>Get in Touch</h5>
<ul>
<li><span class="small">email.</span> <a href="#">info@ibetwhat.com</a></li>
<li><span class="small">ph.</span> 655-606-105</li>
<li><span class="small">add.</span> East Pixel aBld. 99 <br /> City 9000</li>
</ul>
</section>
<section class="socials">
<ul>
<li class="facebook"><a href="#">Facebook <span>Become a fan!</span></a></li>
<li class="twitter"><a href="#">Twitter <span>Need more feed</span></a></li>
<li class="rss"><a href="#">RSS <span>Be up to date</span></a></li>
</ul>
</section>
</section>
<section id="bottom">
<section class="shell">
<p class="foot-nav">
<a href="home.html">Home</a> <span>|</span>
<a href="about.html">About</a> <span>|</span>
<a href="services.html">Services</a> <span>|</span>
<a href="projects.html">Projects</a> <span>|</span>
<a href="blog.html">Blog</a> <span>|</span>
<a href="contact.html">Contact</a> <span>|</span>
<a href="#">Bonus Pages</a>
</p>
<p>© 2012 My Company.</p>
</section>
</section>
</footer>
<!-- End Footer -->
</body>
</html>
Lösung
Most likely your references are not the same in your VS project as they are on the server. Check that the relative path on your HTML to the CSS file is correct. Next check for the image paths to still work inside your CSS (if any). You'll need to fix those based on your new location.
Try accessing the CSS, js, and images by direct URLs. Verify that the HTML uses the same paths.
Of course use Firebug or Chrome Developer Tools to debug the paths.
Andere Tipps
It is difficult to say what is happening without being able to look at your particular scenario first hand, however, if your are referring to the Visual Sudio Designer when you mention 'previewing the page', then the results you describe are to be expected if your original HTML pages HTML are javascript heavy in rendering the UI. The Visual Studio designer does not process any javascript in preview mode.
If you are not reffering to the Visual Studio designer and are acutually browsing to the HTML pages hosted by the Visual Studio web server host process then you may want to check how you are referecing your resource files (css and the like). If you are fully qualifying your stylesheets in your href like href="http://domain.com/styles/main.cs" then chances are they are not getting loaded properly due to the fact that the Visual Studio web server typically runs on a random, other than port 80 configuration. You should probably not be referencing them this way in anycase. Most likely, the issue is not permissions but a broken reference to your css and javascript files.
