I have different sites being served up, essentially running off the same code. One page renders correctly, while the other appears to have no CSS available.
When I bring up the IE9 developer console for the broken page, I see:
SEC7113: CSS was ignored due to mime type mismatch
So that explains why the pages render improperly, but the question is, why am I seeing that error on one page, but not the other?
Using fiddler, the same CSS is served to both sites, and both sites have a the metatag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"/>
I know IE9 is still in beta, but I am trying to figure out why this is a problem with my site.
This doesn't look like an IE emulation thing - it sounds like the CONTENT-TYPE in the response isn't "text/css". It looks like IE9 enforces that files that are expected to contain CSS are actually marked as such.
Just out of interest, are the CSS pages processed in any way? i.e. are they rendered by an ASPX page to allow you to inject CSS? If that's the case then you may want to make sure your page declaration at the top includes the ContentType declaration, e.g.:
<%# Page Language="C#" ContentType="text/css" %>
It turns out, IE9 will ignore the missing content-types for all sites that in your "trusted-zone."
Sites outside of the trusted zone will not render the css if there is a missing content-type header.
Related
I have an MVC3 (razor) site published to IIS7 locally for testing purposes.
When I access the site via "localhost" it looks different from when I access using the IP address or machinename?
I have cleared my cache and re-loaded the pages to confirm and they still appear the different. The CSS must be loading to give the correct fonts/colours etc, although ":hover" elements appear to load much slower?
I am using JQuery/JQueryUI on the site if that helps identify the problem?
Any ideas?
Edit: More info
The titles, labels and table definition are build from ViewBag.Title, or looping through rows in a ViewModel - nothing clever, just standard MVC3/Razor stuff.
The same css file is used for every page, and F12 in IE8 shows the correct css has been loaded.
Title/subtitle font sizes/colours are correct, just their positioning is out?
Table border appears thicker?
Positioning generally seems a little "out", but I can't understand why there is this difference?
Can a firewall/AV package strip out positioning?
The same css file is used for every page, and F12 in IE8 shows the
correct css has been loaded.
Developer Tools should show that IE is not using the same "Browser Mode"/"Document Mode" between the two instances of the site, because that's the problem here. IE defaults to different modes depending on if you're using a machine name or not (amongst other things).
Adding this to your <head> should sort out the problem:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
I had a similar issue, where the sizes differed from the local development site to the one on the production server. Turned out that I forgot the zoom level to 90% when viewing the development version... This answer helped me realize that: https://superuser.com/questions/315448/different-font-size-between-localhost-and-remote-server-in-firefox
I had exactly similar issue in IE11, I used this code
<meta http-equiv="X-UA-Compatible" content="IE=11">
And now whether its localhost or my machine name, the page always rendered nicely.
Just wanted to add, that if you use HTML5 tags (nav, header etc.) IE8 will render different on localhost and remote host.
If you add:
<!--[if lt IE 9]>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<![endif]-->
Then the IE8 will show the same on local and remote host.
So here's an interesting conundrum.
I have a page, default.aspx. It has a LINK tag to a stylesheet, located in the CSS subfolder:
<link type="text/css" rel="Stylesheet" href="Css/Logon.css" media="all" />
The folder structure is as follows:
[Root]
[CSS]
[Images]
[Logon]
No big surprises. (Our default.aspx page is our logon page. Again, no big surprises.)
Here's the problem. If you launch the page in IIS, the page renders beautifully. CSS loads, fonts appear, everything is positioned appropriately, and lions are laying down with lambs.
If you view the page in WebDev, the stylesheet isn't loaded. Since it specifies all the images, fonts, and positioning, everything is black on white, in Times New Roman, slammed left against the window border. Dogs are chasing cats in circles and causing traffic accidents. Chaos ensues.
Why? How do I fix it? What information do I need to provide to reach a happy conclusion?
P.S. I am aware of the URL differences between running it in IIS and Webdev, but the differences don't seem to make much sense to me, due to one simple fact: the path to the style sheet is relative to the location of the default.aspx page. The stylesheet isn't being loaded at all. I can see this because there's no font styling at all.
My recommendation would be to use Firefox to load the page. With the Firebug add-on installed you can view the requests for the CSS files in the Net panel. This will allow you to at least see the path that is being used for the CSS file.
If you have not used the network monitoring feature in Firebug before you may want to go here:
http://getfirebug.com/network
We eventually discovered the cause of this problem using Fiddler: HTTP 401 (Unauthorized). A little more research uncovered that we needed to add explicit <location/> entries for the stylesheet, and all the images it referenced, to our web.config file.
While viewing the HTML IE 8 sets the default document mode as IE8 Standards as it should but it enters quirks mode on an asp page.
Even if I use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
it doesn't really help.
What should I do?
First thing I would do would be place identical output in a HTM file and visit that instead. If you get different results then there really is something wierd going on because I doubt IE8 has any way to treat "asp" any differently.
BTW, How do you know its actually going into quirksmode?
What happens if you use stronger DTD like this:-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Does it still remain in quirksmode?
You're not confusing IE7 compatibility with Quirksmode are you?
IE7 had a number of bugs in how it render even Standards mode HTML, perhaps what are seeing is IE7 compatibility instead.
Use fiddler to examine the headers being sent with the content. Is there a header like this:-
X-UA-Compatible: IE=EmulateIE7
in the response?
Is the Compatibility button present next to address in the brower UI?
The only thing that actually works is <meta http-equiv="X-UA-Compatible" content="IE=8"/>, other browsers will ignore it but IE will be forced to be in IE-8 mode unless you've done something really stupid like putting something before the HTML.
I write standards based classic ASP all the time. The things to check would be your HTTP headers. Make sure something isn't being inserted into your HTTP header to cause it to use quirks mode. Might check your IIS box to make sure there isn't something being sent in the "Custom HTTP Headers" section in IIS. Also, check that your doctype is indeed correct. Lastly, make sure that you do not have any of IE's special meta tags that can change the rendering mode. Just because classic ASP is old doesn't mean that the browser would display it any different than any other HTML page. Honestly the browser doesn't really even care what the extension is. If it is served as html mime type then it will render as such.
The web dev toolbar for Firefox is quite an impressive tool.
What I am completely clueless about is how does this tool get the css stylesheet file of a site? This is hosted on a host which is secure etc. I am completely stumped.
I must be thinking about this in all the wrong way.
Thanks
The client (in this case Firefox) has to download the CSS file in order to render the page correctly. The plugin (in this case Firebug) simply requests the proper URL and the browser it gets it--most likely from the cache. There is no real mystery here.
In every HTML file, there's a link to the CSS stylesheet, or else the browser wouldn't know where to find it, thus losing the ability to render the page correctly.
It's in the form of <link rel="stylesheet" type="text/css" href="theme.css">,
I'd like to add that regardless of whether the host is 'secure' or not, it still is presenting the file to the client.
Unless, of course, you're looking at a XML file. Then you need to consult the XSL which'll tell you where the stylesheet is.
I'm working on a webapp, and every so often we run into situations where pages will load without applying CSS. This problem has shown up in IE6, IE7, Safari 3, and FF3.
A page refresh will always fix the problem.
There are 3 CSS files loaded, all within the same style block using #import:
<STYLE type="text/css">
#import url([base css file]);
#import url([skin css file]);
#import url([generated css path]);
</STYLE>
In any situation when we take the time to examine the html source, nothing is out of the ordinary. Access logs seem normal as well - we're getting HTTP 304 responses for the static CSS files whenever they are requested, and an HTTP 200 response for our generated CSS.
The mimetype is text/css for the css files and the generated css. We're using an iPlanet server, which forwards requests to a Tomcat server.
davebug asked:
Is it always the same css file not loading, or is the problem with all of them, evenly?
None of the CSS files load. Any styles defined within the HTML work fine, but nothing in any of the CSS files works when this happens.
I've had a similar thing happen that I was able to fix by including a base style sheet first using the "link rel" method rather than "#import". i.e. move your [base css file] inclusion to:
<link rel="stylesheet" href="[base css file]" type="text/css" media="screen" />
and put it before the others.
if it happens often enough that you're able to see it in your browser, try intalling the Live http headers Firefox extension or the Tamper Data extension, and watch the response headers as they are seen by the browser.
I don't know why, but in my case if the page is loaded from an action with the path like /ActionName, I see this problem.
But if I change it (for example) to /reservedArea/ActionName or /aPath/ActionName it works :/
It's crazy...
Examining the headers is a good idea, but I imagine all you will learn from them is that the server didn't respond to a request every once in a while.
I see this happen all the time on the net. Images won't load until you refresh, css is messed up, etc. All of the situations are solved by a refresh.
I imagine one way you could "fix" this, maybe, is by specifying in your cs file a url for an image for some element. Then, on page load in javascript, get that element and see if that image has loaded. If not, then have the page reload itself.
Seems pretty exotic, but that's the only idea I had...
Use ab or httperf or curl or something to repeatedly load the CSS files from the webserver. Perhaps it's not consistently serving the pages.