In order to dramatically reduce the number of HTTP requests on my ASP.NET MVC website, I am programmatically merging the files.
Essentially, I have an MVC URL http://localhost/Optimisation/JavaScript/ that calls my controller. The controller reads the javascript files in a certain order, merges them into a single output and renders it on a view.
This works fine.
I am implementing the same concept for the CSS now, using http://localhost/Optimisation/CSS/ - this merges a number of CSS files in a particular order and renders it onto the view.
This works in internet explorer, but in FireFox the styles are all absent. When I "inspect" the CSS file using FireBug it says that the file is empty. The same technique works perfectly in Internet Explorer, so the code behind is working - and if I browse to http://localhost/Optimisation/CSS/ using FireFox, it shows me the raw CSS that I've merged.
I'm referencing the optimised CSS like this:
<link href="http://localhost/Optimisation/CSS/" type="text/css" rel="Stylesheet" />
Make sure the server is sending it with a content-type of text/css.
I think Firefox will put a warning in the error console if it's not (or you can just look at the headers with your tool of choice).
Related
Using Delphi XE6, I've written lots of service applications that use TIdHTTPServer. Every now and again, a javascript file will fail to load in Firefox, and when I check the Delphi application's log, there's no mention of it.
Example:
In TIdHTTPServer.OnCommandGet, first thing I do is log the requested page. After the page loads in Firefox, the log shows the page request, 3 CSS requests and 3 JS requests - for this example it is correct. But sometimes, and it's usually after I haven't requested the page for a while, despite closing Firefox, and the Delphi service application, one of the JS requests is missing, and it's not loaded in Firefox, so things don't work.
Not sure if it's relevant, but one of the techniques I use is appending the file's last modified timestamp code as a parameter when requesting the file.
eg. in the HTML, it will say <script type="text/javascript" src="general.js?rnd=20150522155113"></script>
I do this to ensure updates to JS and CSS files are always reloaded and not cached.
I'm not sure how to go about solving this. The issue affects multiple delphi projects. I only use Firefox, so not sure if other browsers are affected. Any help is appreciated.
I just spend the last few hours debugging a huge problem, the problem being,
My external css style sheet were not loading when I used Firefox.
Using Firefoxes debugging tools I was able to conclude that the file was not been found, it had nothing to do with the MIME type or encoding as I checked.
I was using relative URL's to reference my style sheets to I decided to use absolute and it worked! after hours of nearly losing my mind.
However using absolute URL's on every page is just a pain and not practical if I am debugging on localhost all the time.
Could anyone tell me why I need to proved the absolute URL's? The CSS file is there and Firefox states the relative URL and when I go to it manually, it works, however Firefox will just not find it. Every other browser including Chrome and Safari Works with the relative URL's.
I could use php and define all these relative URL's and then reference these within my HTML making it easier to switch domains for debugging but still its a pain and I don't know why I have to do this.
My site here
Thanks in advance,
Jack.
Note : For testing reasons I am giving the link to my site which I am having problems with, nothing to do with advertising.
For your stylesheet problem: change the backslash to a forward slash in your <link> element.
<link rel="stylesheet" href="css/main.css">
There are a couple of images with a similar problem.
You have a number of other errors: <script> tags between <head> and <body>, and some loose </article> tags as well
If you're using Firefox, take a look at the page source and fix anything you see highlighted in red. Then try again.
I have this code in an Index.cshtml file:
#{ViewBag.Title = "Home";}
<link href="Home.css" rel="stylesheet" type="text/css"/>
<img id="logo" src="~/Content/Images/Logo.png" />
This file is a view in my ASP.NET MVC4 application.
When I run the web application, I can see that the source code adds the appropriate HTML around this, and also adds a reference to the 'Content\Site.css' file.
However, neither the Site.css file nor my own Home.css CSS file appear to be used when running the application. First of all, any edits I make to Site.css aren't reflected when I view source when running the application, which is weird. I have saved everything and built the project before running it and checking out the source code through my browser.
Second of all, the CSS link to Home.css (which is in the same folder as my view) does not appear to be used. The HTML editor doesn't have a problem with the file, and so indicates that the path is valid - but when I click on Home.css in my the source code editor on my browser, I get a 404 error, saying that the file doesn't exist.
Any idea on what I am doing wrong here?
The actual image I am using here loads correctly.
the CSS link to Home.css (which is in the same folder
as my view) does not appear to be used.
The Views folder is restricted direct access to from the clients. So you should not be putting any CSS, javascript or images files inside it. They should reside in your ~/Content folder (or some other folder which is accessible from the clients). And then reference it like this:
<link href="~/Content/Home.css" rel="stylesheet" type="text/css"/>
As far as your first problem about ~/Content/Site.css is concerned, the stylesheet might be cached by the browser. Try clearing the cache. If you are running your application in Release mode and enabled Bundles, ASP.NET MVC 4 will automatically emit a cache response header so that the static resources included in the bundle get cached in the browser.
you also could use #url.content() helper method to convert your relative path to absolute. It's extremely useful when you will implementing website with multiple areas and also it's the common style to set path to the content in MVC so it's better does it this way
css belongs in the head - i can't stand .net
It also needs to NOT have the closing /> at the end of the tag - it messes things up. XHTML proper, but not everyone understands it. Unclose the link tag and try...
Use ~/ before your file statement for example:
<img src="~/images/team-image3.jpg" class="img-responsive" alt="">
instead of
<img src="images/team-image3.jpg" class="img-responsive" alt=""> etc...
Is it possible to display <svg> content inside an <html> in an iOS browser without the use of the <embed> or <img> tags which require me to store the <svg> content in a separate file?
The embedding of <svg> content inside <html> seems to work on all other modern browsers (IE9, Chrome, even Safari on Window!).
I have found some references that suggest changing the content-type to 'text/xml' might work, but I am not able to change it as my code is running as part of a mobile server control in SharePoint 2010.
My page contains several <svg> areas, each of which displays a simple graph. The data for these graphs is stored in a serialized object which needs to be deserialized before the svg polylines can be drawn. Since the deserialization process is time-consuming I prefer to do it once and generate all graphs in a single pass, rather than generating resource references to individual svg files which can be referenced by an <embed> tag.
Edit: There are indications that inline <svg> is supported in iOS5.
If you need to embed the SVG directly in the document
Use XHTML (not just HTML), serve it with the correct mime type, and your SVG will work correctly in all major browsers, including on the iPhone and iPad.
This example file uses inline SVG in XHTML, and even uses JavaScript and CSS in the host document to manipulate the SVG:
http://phrogz.net/SVG/svg_in_xhtml5.xhtml
It works fine in iPhone/iPad.
If you need to reference an external file
Use the <img> tag to reference your SVG directly. This works on iOS.
For example, open this on your iPhone/iPad:
http://phrogz.net/SVG/svg-via-img.html
which references
http://phrogz.net/SVG/heart.svg
Note that there is a bug with WebKit related to rendering variable-sized SVGs inside fixed-size <img> tags. (It appears to draw the aspect ratio for the SVG from the aspect ratio of the containing window instead of the dimensions of the <img> element.) You can see the weirdness in Chrome or Safari if you resize your browser window with that test file.
You may need to use inline SVG inside an XHTML compound document. In this case, XML namespaces are used for both the HTML root element and the inline SVG element. See here for a relevant example:
http://www.croczilla.com/bits_and_pieces/svg/samples/dom1/dom1.xml
Other useful examples may be found here:
http://www.croczilla.com/bits_and_pieces/svg/samples
Have you tried using <object>? I haven't done this in a while but you can Google for that.
I've run into a weird issue with a site running ASP.NET MVC on IIS7.
Whenever I do a page refresh (F5), the external stylesheet content gets "injected" into the page itself, instead of the tag pointing to the css file. Example:
<head><link type="text/css" rel="stylesheet" href="external.css" /></head>
Renders as:
<head><style type="text/css">body{ color: #000; }</style></head>
Locally, there is no issue at all, only when it is uploaded to the server.
If I do a hard refresh (Ctrl + F5), it renders as it should, but subsequent requests will not.
I'm inexperienced with IIS7, so I don't know if this issue could be caused by it.
Any help would be appreciated.
Turns out an improperly closed script tag was wrecking havoc with the page.
After fixing it the page renders normally.
Well, this is a weird issue. I don't know if IIS7 has a setting, or a handler that would cause this.
Try using a tool like Fiddler or Live HTTP Headers to verify the external CSS file is actually not being requested at all.