IE11 will NOT load external css from the intranet - at all. Internal css works fine. In-line css works fine. External CSS works fine on the Internet. Everything works fine in other browsers - everywhere!
When I open C:\Users\hennesse\Desktop\test.html (below) by either right-clicking and openWith->IE - or- typing into the IE location bar, I get two alerts: "internal javascript", and "external javascript" - then:
the first line is NOT red
the second line is blue
the third line is green
However, if I upload this to my web server, and open it with IE, the first line IS red. With Firefox and Chrome, the first line is ALWAYS red, intranet or internet.
For some reason, IE11 will not load the external CSS file on "My Computer".
Changing security settings in Internet Options->Security->Allow Active Content to run in My Computer (and rebooting) results in a prompt (or not) about Allow Active Content? But the results are the same.
This is driving me insane! -Dave
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
<!--
external file test.css contains:
body { color: #ff0000 }
-->
<style type="text/css">
.blue {
color: blue;
}
</style>
<script type="text/javascript">
alert("internal javascript");
</script>
<script type="text/javascript" src="test.js">
// external file test.js contains
// alert("external javascript");
</script>
</head>
<body>
This should be red, but it isn't
<p class="blue">
This is blue
</p>
<p style="color:green">
This is green
</p>
</body>
</html>
In the F12 console, I found: SEC7113 "CSS was ignored due to mime type mismatch". Discussion here: 1 [MSDN]. It seems that IE9 and above "sniff" the HTTP headers for the correct MIME type, and ignore JS and CSS that have the wrong header. When it fetches files from the local filesystem, it should disable this sniffing, since there aren't any real HTTP headers.
But my particular computer is sniffing and ignoring anyway. I've searched and searched, but the mighty Internet has only yielded one other person who has this problem. She solved it by reloading the operating system. I'm not gonna do that!
I very seldom use IE for anything except a final compatibility check after I've loaded stuff to a server. Except for one personal "extension" to a Windows app that invokes IE on the user's computer. Since I'm the only using it, I just hit F12, and select IE8 mode (this shows it's the IE9-up MIME sniffing). It works fine, and since it only costs me a couple mouse clicks, it sure beats reloading the OS.
Although I didn't really solve the problem, perhaps the "sniff and ignore" info can help someone else do so. OCHI - thanks for your help.
-Dave
Related
So this is probably about as basic as it gets and I'm not understanding what I'm doing wrong. I am using IIS on Windows 10 (for development\practice) and I have only two files in my web root: default.htm & style.css
default.htm
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="bodystuff">
Stuff
</div>
</body>
</html>
style.css
#bodystuff {
font-family: Georgia;
font-size: 5em;
}
My problem (and odds are it's something silly that I'm missing) is that when I open the page with IE (11 if that matters) it opens up fine and the stuff in my body properly renders using my style.css file. However if I open the same web site up with Firefox the site is rendering as if I had no styles configured at all.
Any suggestions on what I am missing to make it so that my CSS is used when opening the site with either IE or FF?
The end cause was that the file encoding for my default.htm and style.css files were different. I recreated the files using UTF8 and now it works. It would appear that Firefox is quite sensitive to the file encoding between CSS and HTML documents. I found the solution thanks to #AlexanderO'Mara pointing me to Firefox's developer console which revealed a warning that I then searched for and found a discussion about here.
I loaded a Javascript widget that outputs HTML, CSS, and additional Javascript.
The source of the page (test.html) is just
<!DOCTYPE html>
<html lang="en">
<head>
<title>Widget Test</title>
</head>
<body>
<div id="widget"></div>
<script type="text/javascript" src="http://widgets.some.site/render?element_id=widget_id&customer_id=999999&gallery=22222&widget_config=769792669" async="async">
</script>
</body>
</html>
The script executes and generates a widget. I can see the HTML nodes in the Element tab of Chrome DevTools. When inspecting a particular element, the inspector says that its style is located at test.html:239, but when I click on the link, it shows me the source page again.
When I load the page in Firebug, clicking on the line number sends me to an internal version of the stylesheet maintained by Firefox. Is there a way Chrome DevTools does this as well? I like Firebug's output of dynamically generated CSS, since I can copy and paste very easily.
No, you won't be able to see the source, as for dynamically generated <style> tags it is not stored anywhere and is thrown away right after parsing, unlike for the external or inline stylesheets, which have the underlying source text (in the foo.css file or in the loaded document <style> tag, respectively).
You are navigated to the document, since you cannot see the stylesheet itself, and it is the DevTools' best effort in this case.
Lately I've noticed a strange behaviour in my browsers, when developing a website or doing some debugging.
When I click on View Source to check the site's HTML source code, the external stylesheets that I coded as links appear now inlined, that is, in its entirety.
What appears is something like this:
<style media="screen" type="text/css" style="display:none">
/*a bunch of CSS styles here, lines and more lines of CSS*/
</style>
...instead of the typical:
<link href="mystyle.css" rel="stylesheet" type="text/css">
It's happening with Firefox, Chrome, Safari, IE... with any browser I use.
Do you know guys what could be going on?
It happens to be only when I use my iPhone as a modem... no idea why.
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css
Are unused CSS images downloaded by the browser or ignored?
Eg. in CSS rules which don't match any elements.
.nothingHasThisClass{background:url(hugefile.png);}
Or would this be browser-dependant?
This would be browser dependent, since it's how they decide to implement the spec, however in a quick test here:
Chrome: Doesn't
FireFox: Doesn't
Safari: Doesn't
IE8: Doesn't
IE7: Doesn't
IE6: Unknown (Can someone test and comment?)
No, they are not downloaded, not at least in Firefox, IE8 and Chrome.
An easy way to test this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nonexistent {
background: url('index.php?foo');
}
</style>
</head>
<body>
<?php if(isset($_GET['foo'])) {
file_put_contents('test.txt', $_SERVER['HTTP_USER_AGENT']);
} ?>
</body>
</html>
If test.txt is populated with the browser's user agent, then the image is downloaded. This was not the case in any of my tests.
A quick test proved it.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css"><!--
.hasnothing{background-image:url(http://25.media.tumblr.com/tumblr_ky7aakqvH01qatluqo1_400.jpg);}
.hassomething{background-image:url(http://27.media.tumblr.com/tumblr_kxytwr7YzH1qajh4xo1_500.png);}
--></style>
</head><body>
<div class="hassomething"></div>
</body></html>
The 2nd image, tumblr_kxytwr7YzH1qajh4xo1_500.png, was downloaded but not the other one. This was proven true in Chrome (Developer tools) and Firefox (Firebug).
Firefox and Chrome (Ubuntu 9.10) don't download images for classes/ids that aren't applied in the DOM.
This may be both platform and browser dependant, though.
Sometimes, it depends just exactly what "unused" means. Different browsers define it differently. For example, in Firefox, styles applied to the <noscript> tag are deemed "unused" and thusly, any images won't be downloaded.
Chrome 26 (possibly all of them, not sure), does download CSS images if they are applied to the <noscript> element, even when JS is enabled. (It isn't immediately clear to me why though, perhaps this is a bug?).
It does not download CSS images applied to elements within the <noscript> element, though. (this is expected behaviour, of course).
Example:
CSS:
noscript { background-image: url('always.png') 0 0 repeat; }
noscript p ( background-image: url('nojsonly.png') 0 0 repeat; }
HTML:
<noscript>The CSS background image of this NOSCRIPT-element will always be downloaded in Chrome. Will not be downloaded in Firefox</noscript>
<noscript><p>The CSS background image of this P-element won't be downloaded in Chrome or other browsers, unless JS is disabled</p></noscript>
In this case, if the user has JS-enabled, both always.png and otherbg.png are downloaded in Chrome. If the user does not have JS enabled, then only nojsonly.png is downloaded in Chrome.
I use this technique for measuring traffic-levels from non-JS-enabled users, as Google Analytics fails us here. I prefer using the background CSS image rather than a normal <img...> tag, because I'm working under the (untested) theory that bots are less likely to grab a CSS image than a <img...> image, leaving more accurate counts for the human-visitors.
Almost all browsers do lazy-loading. If an image is not required, it does not download. Use firebug (add-on in Firefox/Chrome) to see load time for resources.
Interestingly, though, Chrome (at least) will download unused.png in the following example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.unused {
background: url(unused.png) no-repeat;
}
.used {
background: url(used.png);
}
</style>
</head>
<body>
<div class="unused used">
hello world
</div>
</body>
</html>