On a newly created website, based on an existing site, the #import is not locating the CSS files. I am just attempting to pull in the CSS files for a simple Hello World in order to make sure that this first step is functioning.
The HTML heading code:
<head id="Head1" runat="server">
<title>Company Name - Hello World</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style media="all" type="text/css">
#import '<%# ResolveUrl("~/layout/HelloWorld.css")%>';
</style>
</head>
Using Chrome, the Developer Tools displays the following:
<html>
<head id="Head1"><title>
Company Name - Hello World
</title><meta http-equiv="X-UA-Compatible" content="IE=Edge" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style media="all" type="text/css">
#import '';
</style>
</head>
The folder structure for the site contains the following:
HelloWorld -> the root
-- layout (folder)
-- pages (folder)
index.aspx
The code is a cut and paste from the a functioning ASP site.
In the developer tools under the Sources option, there are no folder paths being displayed.
The CSS file has been verified to exist in the layout folder.
The web page displays, but without the CSS formatting.
No error messages are generating when displaying a simple one line web page
.
I have done a side by side comparison of the IIS settings for a working ASP site and the Hello World site, and not differences have been found. I am at a loss as to why the #import is displaying as an empty string.
Any wisdom as to how to resolve this is greatly appreciated.
It should be:
<link rel="stylesheet" type="text/css" href="~/layout/HelloWorld.css" />
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content= "ie= edge">
<title>Blooger</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
I have searched a lot, checked my syntax of linking css n times and spelling of style sheet is correct, the folder I am using is correct I don't know the problem, please help.
I'm not sure whether you've not added it here on SO, but your HTML file doesn't contain anything to show. (no <body></body> or anything within it)
As an example, you need to add
<body>
<h1>My Blog</h1>
<p>welcome to my blog.</p>
</body>
Please check status, type and size in network tab of browser developer tool
I made this website bigeyeslion.com years ago with a template. Recently, I changed some text and images. After that the CSS stop working. I test it locally before upload to server, it worked fine. but the css files just wont load on the server. Here is the header
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leon Sun - Creative Designer - Graphic and 3D</title>
<meta name="description" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="keywords" content="Leon Sun, Creative Designer,Graphic, 3D, Display design"/>
<meta name="author" content="bigeyeslion.com"/>
<link rel="shortcut icon" href="img/favicon.png">
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/style-responsive.css" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I put the css files in a folder public_html/css and index is in public_html folder.
Please help, I been struggle with this for days
I find it very strange. I test the site on a MAC with firefox and on a PC with google Chrome at my working place. both of them show the same problem. with F12, it tells me I have 2 img (which I did not use) were missing. But when test at home with chrome it works fine and also working on a cellphone too.
I think having this class added to the html tag is causing this tag not to work as is supposed to.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I got it working as I said, basically if you want to use Jquery Mobile and the internet explorer "edge" meta-tag the best way to do it to make sure it will work is to send the headers through PHP and include the html file without headers, you can add styles and scripts in the body. Here is my code:
<?php
header( 'X-UA-Compatible: IE=edge,chrome=1' );
header( 'content: width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' );
include('ix.html');
?>
Try this instead : <meta name="viewport" content="width=device-width, initial-scale=1">
Some examples I found online show that they put the second meta element after the view port.
<!DOCTYPE html>
<html>
<head>
<title>Starter page</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
http://www.appliness.com/getting-started-with-html-mobile-application-development-using-jquery-mobile-requirejs-and-backbonejs/
http://www.1stwebdesigner.com/css/jquery-mobile-need-to-know/
Changing page meta: jquerymobile one page with different meta viewport settings
I have created an intranet website(i am new to website creation) and the HTML view was perfect without any errors in all browsers. i have made it has local host with IIS on the same system i am working with.
But when i tried to load it on any browser it loaded the page with just the content on it without any style that i made in the css definition it shows an error "MainMenu.css 404 (Object Not Found)"
Q1. Should i also define my css location in the IIS.
Q2. should i have to declare any line on the html
below is my code:
<!doctype html>
<html>
<head>
<link href="../css/MainMenu.css" rel="stylesheet" type="text/css">
<meta charset="ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-Type" content="text/html, charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOCUMENTATION</title>
</head>
<body>...</body></html>
Your call to the CSS:
<link href="../css/MainMenu.css" rel="stylesheet" type="text/css">
Is saying look in the directory above this one, look for a directory called 'css' and find 'MainMenu.css'.
This infers a directory structure like this:
/top/
/wwwroot/
... index.html etc ...
/css/
MainMenu.css
It's more likely that the directory structure looks like this:
/wwwroot/
index.html etc.
/css/
MainMenu.css
With the css directory within the site root (wwwroot in my example).
Therefore, your link should look like this:
<link href="css/MainMenu.css" rel="stylesheet" type="text/css">
For a relative path, or this:
<link href="/css/MainMenu.css" rel="stylesheet" type="text/css">
For an absolute path (better)
Hope this helps ?
I have an odd problem I've never seen before - linked stylesheets and javascript files appearing inline when I browse the source of a page. It only happens online and not in my local development machine.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/extend-bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css"/ >
and so on becomes this kind of thing:
<!DOCTYPE html><html lang="en"><script src="http://1.2.3.4/bmi-int-js/bmi.js?version=1363970337" language="javascript"></script><head><meta charset="utf-8"><title>Pagetitle</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content=""><meta name="author" content=""><style type="text/css" style="display:none">/**/.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}.clearfix:after{clear:both;}.hide-text{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0;}.input-block-level{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}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;}html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;}a:hover,a:active{outline:0
and it goes on.
Anyone any thoughts on why this would be happening?
Thanks.
DS
Do you have any compressing software on the server? If you save the page, does it also comes out as 1 line? Maybe it is a setting in your browser.
If you're using IE, browser tools being enabled would cause this.
This is likely a duplicate post of CSS and JavaScript appearing inline in sourcecode