External stylesheet content gets included on page somehow - asp.net-mvc

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.

Related

TIdHTTPServer seems to be ignoring connections sometimes

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.

Firefox Demands Absolute URL For Referencing Stylesheet

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.

How to force to open a Page in Document Mode as IE8

We have deployed our webapp, which was developed with JSF, Spring and Hibernate on Tomcat server in our internal network (intranet). When I test in my application in local it's working fine.
But once I deploy to DEV I come across style issues. When I have two dropdowns one after another, the top dropdown overlaps with another one.
This happens when I have Document Mode set to "IE7 standards." When I change Document Mode to "IE8 standards," everything works fine.
To force Document Mode to IE8 standards, I tried this meta tag in my section of the HTML document according to this link, but it didn't work for me:
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
How can I force my page to render according to IE8 standards on the intranet? Does my application render in IE8 standards on the internet?
EDIT :I see something in my develoer tools.Even though I kept my <meta> it after <head> but my primefaces styles and scripts are loading before to that.How can I resolve this?
Odd, this item was posted yesterday, not sure if it applies to your situation:
IE 8 will ignore the x-ua-compatible setting if it comes after the stylesheets. In order for IE to acknowledge the meta setting, put it at the top.
I am glad to tell I am finally able to resolve this issue by using this link in primefaces.And this post also helped to do it through entire application
http://blog.primefaces.org/?p=1433

Merged CSS Fails In Firefox

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).

CSS not updated during debugging ASP.NET MVC application

I am working on a test application based on ASP.NET MVC. I am new to CSS stuff so I am learning that as well.
I have created a master page called "new.master" and created a new css "new.css". I am calling the view from controller as:
return View ("About", "new");
What I am doing is that I am frequently updating the css and master page. So I run the application in debug mode frequently. After sometime I stop seeing the effect of changes in css. When I "view source" in chrome and check the css, it shows an old version.
When I change the name of both master page and css, I start to receive updated views but that works for sometime and then again I stop getting the CSS updates. Have you faced this problem? How can I fix it? (Its terribly annoying!)
Your browser is caching the css. If you force a refresh with F5 that should display any changes.
I think this may be a browser cache issue. In in IE and FF I usually do Ctrl + F5 or Ctrl + Refresh button. Also you can manually clear the cache. For IE you can use the IE Dev Toolbar and for Firefox there is Firebug with both you can clear the cache easily. Not sure about chrome, sorry.
Sayed Ibrahim Hashimi
My Book: Inside the Microsoft Build Engine : Using MSBuild and Team Foundation Build
I found another case in which this can happen.
We started our application with just plain links to the CSS files, then switched to using bundling. We updated the old <link href="#Url.Content("~/somePath/someStyle.css")" rel="stylesheet" type="text/css" /> to #Styles.Render("~/Styles/bundles/someStyle").
We also use a few stylesheets which are only needed for some pages, and they have their own bundle. Now, for one of them, we forgot to change the link tag to the #Styles.Render statement.
The result was that this CSS got updated now and then (so we thought everything is OK; the style wasn't missing), but we could not influence when the update happens. When I started making changes to the file, I realized that nothing I do (emptying the cache, rebuilding the project, restarting Cassini) will trigger an update. The browser always got a 304 Not modified.
So, if you have these symptoms, check your links.
Please use Ctrl+F5 to refresh your browser.
F5 may give you the same page even if the content is changed, because it may load the page from cache. But Ctrl - F5 forces a cache refresh, and will guarantee that if the content is changed, you will get the new content.
hope this will help you
Thank you
go to chroom developer panel by right click inspect -> then go to Network tap -> tick the Disable cache checkbox (note: this should always be checked) -> Refresh the page by pressing F5.
this work for me, hope this help others who have this issue! :)
It's very possible that css is being cached in your browser, so simply clearch browser cache, it should help
This happened to me when I had a master view that would load partial views depending on which partial view the user wanted to see, but the answer from this page helped, https://forums.asp.net/t/1763494.aspx?applying+CSS+layouts+to+a+partial+view
CSS must be referenced in the of the Html document. As a
consequence you cannot include them in a partial view...because in
such case the css is included in the Html body. Please plce the style
sheet in head of the page that hosts the partial view.
I would have css links in my partial views and any modifications to the css files would never happen, even if I pressed Ctrl-F5 in the browser. I also tried clearing cache contents in the developer tools. I noticed by viewing the source stylesheets that the css files linked by the partial views were not changing, so the fix for me was to move the css links from the partial view to the main view where these partial views were to be held.
I had something similar happening to me.
Then suddenly noticed the bundle was added to the page:
#Styles.Render("/bundles/classifiedDetailCss")
instead of:
#Styles.Render("~/bundles/classifiedDetailCss")
Note the missing ~ character in the first example.
(The first example only worked after building the project, otherwise it would return a cached version even in debug mode.)
This can help solve this issues in both dev and production.
use asp-append-version="true"

Resources