I am currently setting up a new page and wanted to test it with the Internet Explorer (9). I thought it was not going to be a problem, because it does work with FireFox, Opera, and Chrome (newest Versions). However, the IE does not attempt to load my style sheet.
I already searched Google and stackoverflow for an answer, but nothing helped.
My page looks as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>Hello World</title>
<meta charset="UTF-8">
<link href="css/main_styles.css" rel="stylesheet" type="text/css">
</head>
<body>
etc.
Any ideas?
Thanks for your help in advance!
PS: I validated the page and the css styles. No errors found.
Edit (July 2014):
Hey, I'm sorry I forgot to update this question for so long. The answer is simple. I had to put #charset "utf-8"; at the beginning of my stylesheet. That's all it took to make it work. Cheers!
Try changing the reference of the link: href="/css/main_styles.css" or href="../css/main_styles.css"
The most obvious possible cause I can think of for this would be that your server is providing the wrong mime type of the CSS file. It might be that IE is more picky about this sort of thing than the other browsers you've tested.
Check what the mime type is by checking the HTTP headers, either in one of the other browsers debugging tools or with an HTTP sniffing program like Fiddler.
Fiddler will also be good for sniffing exactly what is going on when you try to make the request using IE. Whether it's a mime type issue or something else, this will be the best way to find out exactly what's happening.
Finally, you could also try opening the stylesheet's URL directly in IE. That will prove that IE can access the URL.
Hope that helps.
We had this issue with Internet Explorer 11, it's weird but if you rename the stylesheet to anything without the word "style" it will start working!
This is only the case when the accessing the file local on a machine, on a web server it will work fine
Related
When I inspect a web page (even stackoverflow), I always see
<style type="text/css">/* This is not a zero-length file! */</style>
<style type="text/css">/* This is not a zero-length file! */</style>
(yes, twice) at the bottom of the <head> tag.
Google gives no answer about that...
Does it come from Chrome? What's the point?
Edit
Thanks the others for the answer. This code was generated by the Instant Translate Chrome extension.
Try disabling your extensions and see if it remains. If it disappears, try enabling your extensions one by one, to find the culprit.
As you can see on this live demo, I have a website with two stylesheets, one for our beloved IE and another one for the normal browsers, set like this on its header:
<link rel="stylesheet" type="text/css" href="stylelab.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie_stylelab.css" />
<![endif]-->
Even though I have checked many times its spelling, it seems correct but if you open the link from IE (IE v11, in my case), normal Stylesheet is loaded instead IE one.
To check easily if the other CSS is loaded, in theory, when opening the link from any IE and executing the menu (bottom right button), it has blue background.
What is missing here?
IE stylesheet has the entire normal stylesheed PLUS the additional properties needed for it to work, maybe this is wrong and shoul only have the additional properties..?
Conditional comments are no longer supported
Support for conditional comments has been removed in Internet Explorer
10 standards and quirks modes for improved interoperability and
compliance with HTML5. This means that Conditional Comments are now
treated as regular comments, just like in other browsers. This change
can impact pages written exclusively for Windows Internet Explorer or
pages that use browser sniffing to alter their behavior in Internet
Explorer.
See: http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
IE stopped support for conditional comments as of IE10.
At this point a better solution is to target CSS based on features rather than vendors/browsers. Tools like modernizr can really help you with this.
I have an issue with css.
I have a css file which has ie specific css clauses..Like
.ie7 #div
.ie #table
These css is working good in my local on tomcat server.
But the same css is not loading in IE in my dev system which is also running on tomcat.
When I debug the ie is not recognizing the ie specific css clauses. Also I found out that
the IE is not recognizing even the section and header tags.
Please let me know what can be the work around.
Thanks for your time and help.
Regards,
Varma
Assuming you're running IE9..
Make sure you don't have Compatibility Mode turned on, and make sure you have a valid doctype as the very first line to trigger Standards Mode:
<!DOCTYPE html>
If it still doesn't work, then add this meta tag:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Concerning this point:
Also I found out that the IE is not recognizing even the section and
header tags.
In older versions of IE, you need this to make the HTML5 semantic tags work properly:
http://code.google.com/p/html5shiv/
I am getting rid of browser compatibilty issues.
so i come up with idea to load the only css according to browser.
So say if user uses IE then only styleIE.css get loaded if firefox styleFF get loaded and so on.
my question is it correct method if not what care should taken to avoid this compatibilty issues.
because when i solve issues for IE then it opens the new issue in a my stable version of FF
That is done frequently although you probably want to use a general CSS file with the shared styles and combine it with the browser dependent CSS file.
But in fact most CSS problems with different browsers can be solved without this trick and by just using the correct markup and styles...
Usually it's enough to create a stylesheet that looks well in normal browsers, and then make a IE-only supplemental stylesheet that fixes the incompatibilities and include it through conditional comments (although IE8+ is kind of OK and IE7 usually works):
<!--[if IE]>
<link rel="stylesheet" href="/ie_sheet.css" type="text/css">
<![endif]-->
Since IE6 is a horrible monster from the dawn of time, which needs its own specific hacks, you can include a different stylesheet for IE6 (and lower) and IE7 (and higher; not really needed most of the time):
<!--[if lte IE 6]>
<link rel="stylesheet" href="/ie6_sheet.css" type="text/css">
<![endif]-->
<!--[if gt IE 6]>
<link rel="stylesheet" href="/ie_newer_sheet.css" type="text/css">
<![endif]-->
Other browsers parse these as HTML comments and ignore them.
See also: a more detailed discussion of conditional comments.
I use a reset stylesheet, a normal stylesheet (i.e., for all standards-compliant browsers) then IE-specific stylesheets that reference the various versions of IE. The IE stylesheets only cover the items that IE has trouble with. I use the Microsoft conditional comments for including those stylesheets, so they are not read by other browsers.
It's not morally reprehensible, but it is less than ideal.You can solve cross-browser compatibility issues by learning a little more about what is going on.
http://hsivonen.iki.fi/doctype/
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/
http://www.positioniseverything.net/explorer.html
Yes, many websites do just that.
That works just fine, the only thing to keep in mind is that, everytime your user loads a page, now the browser has to run through all the conditionals. So as long as it's not excessive (one check for each version of every major browser), nobody will notice.
Now making changes to the css if you've got even just 3 or 4 versions will be a bit of a pain, but everything has it's cost.
I've seen people doing things like this in their HTML:
<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->
Does this work across all modern browsers and is there a list of browser types that will work with that kind of if statement?
Edit
Thanks Ross. Interesting to find out about gt, lt, gte, & lte.
This works across all browsers because anything except IE sees <!--IGNORED COMMENT-->. Only IE reads the comment if it contains a conditional clause. Have a look at this article
You can also specify which version of IE. For example:
<!--[if IE 8]>
<link rel="stylesheet type="text/css" href="ie8.css" />
<![endif]-->
If you can use Javascript, there are several options:
navigator.appName
navigator.appVersion
link
Or something more robust by using a library such as jQuery.
Finally, you could use the BrowserDetect object from QuirksMode.
Once you have the browser name and version, you can then insert HTML to link to a style sheet or include other tags.
Conditional comments are purely for IE (version 5 and later). The official Microsoft documentation is here. If you are going to use them the best strategy is to conditionally include external stylesheets or javascript files after your normal includes. This means that on IE your IE-specific code will override everything else. On any other browser the code will be treated as comments and ignored by the parser.
Further to Ross' answer, you can only target the Internet Explorer rendering engine with conditional comments; there is no similar construct for other browsers. For example, you can't write conditional comments that target Firefox, but are ignored by Internet Explorer.
The way I achieve the same effect as your example above is to sniff the user agent string. I then deliver a suitable CSS file for that browser. This isn't perfect because sometimes people change their user-agent string for compatibility.
The other way to target different browsers is to utilise browser specific hacks. These are particularly nasty because they usually rely on bugs in the browser and bugs are liable to be fixed!
User-agent sniffing is the best all-round solution in my opinion.