dWhen I run an ASPX page of ASP.NET web forms application using local host, as follows:
localhost:9010/MyLogin.aspx
the page is using all Bootstrap styles. Everything works as designed.
But when I run this page using the server name, as:
http//servername:9010/MyLogin.aspx
the page does not recognize any of the bootstrap styles.
This is how the bootstrap is referenced in the head of the page:
<link href="~/content/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
The physical folder where the application is installed (c:\inetpub\wwwroot\myapp) has all the sub-folders and files. As:
c:\inetpub\wwwroot\myapp\content\bootstrap\css
What could be wrong with the href above?
It's possible that compatibility settings are enabled for intranet pages. Disable that from internet explorer compatibility view settings and see if it works.
Related
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" />
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<!-- style sheet -->
<link rel="stylesheet" href="css/styles.css" />
I have been writing and editing it in Brackets and all appeared well until I went to view it in a browser like chrome or firefox.
Since Brackets runs a local server in the background try to add http: or https: in front of your double slashes.
Please Setup your project into a local web server
The advantages of using a web server within a web development environment
While you can certainly create and test HTML pages on your local computer without a web server, most web professionals use their own web server.
There are many advantages to using a web server within your development environment. Of course, in a production hosting environment, a web server is essential. And, depending on your website, a web server could indeed be essential in your development environment.
When I say "development environment", I'm referring to a copy of your website, usually on your local machine, that you use to perform updates before you commit them to the live (production) environment.
In practice, you could have many copies of your website for different purposes (such as testing, training, protypes etc), but let's just call it "development environment" for now.
Here are some advantages of using a web server within your development environment:
Your local website behaves more like the live one. For example, you can configure directory security, test your custom error pages etc before commiting them to the production environment.
You can use server-side scripting languages such as PHP and ColdFusion.
Allows you to standardize your coding. For example, you can use root-relative paths for your image references and hyperlinks (eg, /directory/image.gif). In other words, your paths can represent the website structure, rather than the directory structure of your computer.
Knowledge. The knowledge you gain from using your own web server will help you understand how it works in the live environment. This will most certainly help you when you need to communicate with your hosting provider - you'll be able to use terminology that makes it easier for them to understand your request/issue.
Viewing HTML Files Without a Web Server
When someone learns how to code HTML, chances are, one of the first things they learn to do is how to view their (newly created) HTML file. They will learn that you can simply double click on the HTML file, and this will launch it in their web browser. And from that point on, they can view their web page/website as it was intended to be viewed.
Here are some examples of what the URL could look like when viewing a web page without a web server:
file:///C:/Documents%20and%20Settings/Homer%20Simpson/My%20Documents/index.html
file:///C:/Inetpub/wwwroot/index.html
These examples are using the file protocol in order to display the files.
Viewing HTML Files With a Web Server
One problem with the above method is that, you're not viewing the website using the HTTP protocol (you're using the file protocol instead).
Now, this isn't normally a problem if you're only using client side languages such as HTML, CSS, and client-side JavaScript. But it is a problem if you're trying to use a server-side language such as PHP, ColdFusion etc.
Also, even if you're not using a server-side language, it could still cause you problems with developing a website that behaves exactly how it should on the web.
When you view a web page via a web server, the URL begins with http://. Also, the URL will consist of either an IP address or a domain name/host name.
Here are some examples of what the URL could look like when viewing a web page via a web server:
http://127.0.0.1
http://localhost
http://www.quackit.com
http://dev.quackit.com
When you first set up a web server, you can usually navigate to your default web site typing http://localhost or http://127.0.0.1. When you add more websites, you'll need to create your own URLs for them (via a DNS server or Hosts file), then assign that URL to your websites via your web server.
I am making a small recipe website for a friend of mine in django. Currently, I am in the process of deploying it to Heroku. I am using Amazon S3 for static content.
Here is the website: https://chiryaroti.herokuapp.com/
It seems S3 itself is working fine as it downloads css, and js. But, when I "inspect elements" in firebug, it says no style attached.
Why is not HTML making use of the css stylesheets ?
Thanks in advance.
You are requesting insecure resources(http) in a secure page(https), those resources are blocked by browsers.
You should use protocol-relative paths.
e.g.
<link href="//chiryaroti.s3.amazonaws.com/css/main.css" rel="stylesheet" />
I have asp.net app that I am trying to upload to azure host.
first I have try to link in the traditional way with Css folder and link to it
<link href="http://mysite.azurewebsites.net/css/style.css"
rel="stylesheet" type="text/css" />
NOT WORKING
then i create blob and reference to it :
<link href="http://mysite.blob.core.windows.net/scripts/style.css"
rel="stylesheet" type="text/css" />
NOT WORKING
now I dont get error but nothing happend to the styling (after empty my cache and restart the site)
I am not using master pages in my site just normal asp.net page.
i saw in some place that they are doing it with master page but there is other way to do it without master page.
Thanks.
Well, I'm trying to make custom app_offline.htm and want to add links to my css files in project. But next code doesn't work
<link href="/Content/Themes/screen.css" rel="stylesheet" type="text/css" />
In console I've got error
GET mySite/Content/Themes/screen.css 503 (Service Unavailable)
Please, give me advise how to make a link to css file in app_ofline.htm. Any help will greatly appriciated!
The idea of the app_offline.htm is that it indicates that the app is, well, offline. So, no resources are available from the site when the site is offline. Either put the relevant rules into the page or host the stylesheet on a separate domain.
You have to use inline css style for this instead of referring to external CSS file.
<style type="text/css">
/* write your css code here */
</style>
App_Offline.htm
Basically, if you place a file with this name in the root of a web application directory, ASP.NET will shut-down the application, unload the application domain from the server, and stop processing any new incoming requests for that application. ASP.NET will also then respond to all requests for dynamic pages in the application by sending back the content of the app_offline.htm file (for example: you might want to have a “site under construction” or “down for maintenance” message).
You can add it as base64 in the img tag... like this:
<img src="data:image/png;base64,<64-bit string goes here> alt=""/>
This works at least for an image that says the site is under construction.
You can't link to it. It's offline. Unless you're using a remote css file that you can guarantee will be in a functioning server the css file will not be allowed to be served because the .Net Framework restrictions have been put in place to forbid the serving of any file except app_offline.htm. You can either put your css inline with the page or host it on a separate site (which is a choice some companies make anyway to keep design elements in a common location for enterprise applications).
When start debug mode of my asp.net website, it renders in my browser with the url
http://localhost:111/mywebsite/Default.aspx
The css file is referenced like this in the html
<link href="~/css/style.css" runat="server" rel="stylesheet" type="text/css" />
So naturally the site breaks because it looks for the CSS file in localhost:111/css/ instead of localhost:111/mywebsite/css/.
When I launch the website, it will actually be served from the url:
http://mywebsite.com
So is there a way to reference my stylesheet properly in both my dev and production area with a simple prefix like <?=$site_url ?> or something?
Additional info
In my solution explorer, I see that my project is marked with the path C:\...\mywebsite. Is that why the ~ assumes my project is always in a subdirectory? How do I tell Visual Studios that this project should always be served as something like http://localhost:111/Default.aspx?
This is what I see in the page source of both my localhost and production server:
<link href="~/css/style.css" rel="stylesheet" type="text/css"></link>. The css is active on production, but not my localhost.
I went to the solution explorer, then selected the item in the tree labelled C:\...\mywebsite, then I went to the Properties window at bottom right of VS, and changed the Virtual path to /. Now my dev website's root is the same as my prod website's root.
This will do the trick.
<link href="<%=ResolveUrl("~/css/style.css")%>" runat="server" rel="stylesheet" type="text/css" />
You already have, ~ resolves to the root of the website when the page is rendered.
Further reading: http://weblogs.asp.net/fmarguerie/archive/2004/05/05/avoiding-problems-with-relative-and-absolute-urls-in-asp-net.aspx (which works in chrome, FF and IE).
~ resolves on the server (which is why you need runat="server").
This code is run to generate the response from a HTTP request that has come to your dev server which is hosting the site from the location of the project on your disk.
~ doesn't assume that the site is in a subdirectory, the dev server will know the root of the website.
In production the site is being hosted by IIS from another location on the disk of the server machine.
Change it to:
<link href="/css/style.css"" rel="stylesheet" type="text/css" />
Remove runat="server" (if you don't need it).
Instead of href="~/css/style.css" use: href="/css/style.css"
href="/css/style.css" means that there is a folder named css in root of your website and a file named style.css inside it.
UPDATE:
As pointed out by comments, this solution only works if your app is running in root.