I'm using IIS to test PHP scripts for a small blog project I'm working on. I created the HTML and CSS before setting up the server, but I've run into a problem that makes no sense.
When changing the style rules in my CSS files, the rules will apply to the HTML file when it is opened by clicking on it directly from the folder, but not when navigating to it through the localhost IIS link. When accessing it through the local server, CSS rules are not applied, but it's exactly the same single HTML file that should be affected, and in one case it is and the other it isn't.
Why is this happening? Is it just some quirk of IIS or something? I've also noticed new rules don't affect pages on the server unless they are explicitly embedded in the tag in the HTML file, but this doesn't make sense because they already have style rules from external files applied to them, they're just ignoring new rules.
EDIT: I tried copying everything into a new folder and loading it from the server that way, and the new CSS rules now apply, so it looks like IIS is loading an old version of either the HTML or CSS file.
Related
I apologize in advance for the generic examples of this since the issue is with a proprietary corporate system.
I support a web app that allows for edits to a secondary CSS file in order to style the page (within the limits of the application). I'm trying to apply a non-standard font that is used company wide but I do not have access to edit the HTML or header of the site, only the CSS. I tried declaring the font-family in the main CSS while referencing the actual font file URLs (since they are used on our corporate site) but they never actually loaded.
I then took the same font-family snippet and created a separate CSS file for just the font declaration and changed the URL to point to the actual files in the relative path (ex: url('fonts/DINWeb.woff') ). I moved this fonts.css file along with the reference font files (eot, ttf,and woff versions) to a public Dropbox folder for testing. I was able to get everything working by simply importing the fonts.css file using the line of code below (URL modified) at the top of my application's CSS.
#import url('https://dl.dropboxusercontent.com/.../fonts.css');
The problem is that the Dropbox solution was just for temporary testing purposes. Once I confirmed everything worked as expected, I moved the exact folder structure to an external hosting location that is approved for use. When I update my import code in the CSS to the new URL, the font does not load. I can access the CSS file and the font files from my browser without any issue so I don't understand why the web app fails to load it. I also have images hosted in this same hosting location that pull into the web app without an issue, it's only the font that has issues. The files work when hosted on Dropbox but not the other source. I've also double checked the references for the URL and they are still correct since the folder structure never changed.
Any suggestions would be GREATLY appreciated. Ideally I would like to just reference the corporate URLs directly in the web app's CSS like I initially tried. If that will not be possible, I need it to work with the externally hosted files since Dropbox cannot be used as the permanent solution.
Basically you cannot load from one domain resources hosted in other domain, unless the second host says that you can. See CORS
You can solve it by moving everything to the same domain (or forcing the user to be always in certain domain) or by adding the Access-Control-Allow-Origin header to the responses.
You can achieve this last thing if you can edit an .htaccess file in the server. Add:
Header set Access-Control-Allow-Origin "*"
Or replace the * with the domain from which you'll be making the requests.
Yes, a subdomain is a different domain (abc.com, www.abc.com and dl.abc.com are not the same).
I'm new to ASP, ASP not ASP.NET. I've programmed before, had experience in PHP. I have many experience with HTML and CSS. I like to organise my files. I know (in php file) I only have to link the external css in the tags to style my webpages. I assume it's the same for ASP. It does, but not for me.
Whenever I tried to edit the style of my asp program and run it in the server it doesn't work. I created other pages as well and same thing happened. Whenever I used Google Chrome to see the elements, I could see my code, but when I click on the style sheet in the 'INSPECT ELEMENT' tool, it opens at the side with nothing there. I did script the css, and tried to make the background color black. The styling works only when I do an internal styling within the asp file between the tags.
Does anyone know how I may solve this issue? I hate using internal css as external ones are faster and more organised.
Check the following common issues:
Make sure your stylesheet file has a file extension of .css
Check if you have a MimeType setup for .css files as text/css in your IIS.
If you're returning CSS code from a .asp page file extension, make sure you first call Response.ContentType = "text/css" at the top of the page.
When including it in your html document make sure you're using something along the lines of the following syntax:
.
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
I have a question about file permissions of html - css files served by httpd (on CentOS).
I have a website with several html - php - css files. When a user enters the URL of my website, index.html is displayed as it should. I tried to browse one of my css files (just for fun), and I realized that css source code is displayed in the browser. I do not publish the css files and their exact names of course, but some names (e.g style.css , bootstrap.css etc) are trivial, and one can try and get the styling of my webpage easily.
What is the solution to that? I cannot take off the read permissions of these files, because apache would not style the html files (since it will not be able to read the css).
There's no solution to that, css files must be readable and downloadable. You can minify them if you want them to be less readable (and smaller which is its real use).
Edit: Relevant Answer
I made some css changes to my custom css file and uploaded the css file. However the changes are not shown. I have tried all of following:
remove var/cache/*
flush js/css cache from magento admin
clear browser cache
flush siteground cache
I even tried removing the css file and then access it from url URL, the old file content still shows but the css effects were gone on front UI.
what could be wrong.....
It is likely that your browser is still caching your CSS files. One way to check if it is indeed the browser and not say accidentally editing the wrong CSS file is by enabling and disabling the CSS file merge. By doing so you are forcing the browser to fetch for a whole new file - essentially bypassing caching.
You may also want to take a look at our CSS/JS Versioning extension which includes automatic refresh of the file name hash based on CSS/JS file timestamps (sensitive to editing and changes) http://extensions.activo.com/css-and-javascript-versioning.html
I'm assuming this is an easy question, but I'll be darned if I can find the answer.
I have a website in Visual Studio 2008. The paths to the stylesheets (and images) are in the following format /css/stylesheetname.css
At the root of the web project in Visual studio the folder exists as does the stylesheet. These paths work fine when running it in IIS.
If I use the inbuilt webserver in Visual Studio the paths fail because it puts the projectname in the path i.e. http://localhost:2020/projectname/default.aspx
In this case the / takes the path right back to http://localhost:2020
This is further compounded by the fact that if you click "design" the styles that import background images all fail although the stylesheet is imported correctly (becuase all other aspects of the stylesheet work i.e. .class{font-family:arial;} works but .class{background: url(/images/image.jpg)} does not).
I guess it's all to do with how Visual studio calculates its root path for the website, however I can't find a setting to change this.
Any ideas??
Update: as per Egil Hansen's answer I converted the paths in the CSS file to relative paths. However the background images still do not display in Design mode. I'll take a look at using Themes to get round this in due course.
I think the correct solution is to use relative urls in the style sheet instead of absolute urls as you use now.
Do note that relative urls in style sheets are relative to the location of the style sheet, not the current page being view by the browser.
If you use ASP.NET Themes, you can put all your website graphics in a /App_Themes/YourTheme/Images/ folder, and put your style sheet in the /App_Themes/YourTheme/ folder.
In your style sheet, you can then simply reference an image with url(Images/img.gif), and it will work both online and in development.
The you just need to assign your ASP.NET Theme to the page(s) you want, either through web.config's Pages section (<pages styleSheetTheme="Default">) that will assign a theme to all pages on the website or through the <%# Page ... directive on each page.
In general, you can do some really neat things with ASP.NET Themes and Skins, just take a look at the ASP.NET Themes and Skins Overview over at msdn.microsoft.com.
There are a few issues to be aware of with Themes in ASP.NET, take a look at my post How to take control of style sheets in ASP.NET Themes with the StylePlaceHolder and Style control, which explains and solves the issues I have come across so far.
I have been running projects using the custom Image folder for all my graphics for ASP.Net applications. While there have been advancement in this regard with the App_Theme and App_Code folder(s) available in the progressive VS IDE; I still kept my folder and it has not disapponited when deploying it on the server.
So with that said - the proverbial folder will be sitting with all the bin, App_Code and _Themes and the reference to it is made through this way
background: url(../image/..);
of course the code above sitting in the CSS file. It works for me all the time
not sure if this works for VS 2008 or not, but im using visual web developer 2010 and it worked for me:
1) click on the project in the solution explorer
2) it shows a "Virtual Path" property which is defaulted to "/projectname"
3) change it to "/" instead and it seems to do what is desired
let me know if this works for you!
it has been ages since I did anything in css, but maybe url(./images/image.jpg)
will work?
Edit:
Or rather ~/format /css/stylesheetname.css or ./format /css/stylesheetname.css as the url to the stylesheet.
I had the same issue and it drove me crazy. Solution is to add an Apps_Theme folder and copy the images into there. When you publish the site the folder structure is preserved and the imnges display.
I had set path css url image by
code { background:url(/images/xxx.jpg) no-repeat; }
and running file at IIS, so must to point default website to your project
how to running testing preview
type:
http://localhost/default.aspx
this is correct path same running on server
include file js or css can use "/" root path
cheers
Noboyband