I have a rather odd CSS problem.
I am bringing in an Internet Explorer only CSS file with:
<!--[if IE]>
<link rel="stylesheet" media="screen" href="ie.css" />
<![endif]-->
But the file seems to of stopped updating on the server.
For example, nothing changes, even if I remove my previous header fixes and set the body background to pink (the header fix by itself should be quite clearly disabled).
I have opened the file in question in IE directly from the server location and that does reflect my most recent changes, yet an older version is being used to render the page - and yes I have cleared the catch in the browser. Really I'm quite confused why this is happening.
Try temporarily renaming your css as ie1.css and fetch it in the page using href="ie1.css"
If this still does not work, something else is clearly overriding your styles from this CSS file; maybe some other stylesheet? use the IE developer toolbar to inspect where it inherits its styles from, by using the "Element source with style" thingy
Related
This is by far one of the weirdest things I've seen. I decided to check back on a site I made a while ago, and of course something was off. I now mainly use Firefox and noticed the formatting looked odd. I switched to Chrome and everything looked great. I switched to Edge and everything was wrong again. I inspected element in all three and only in chrome did it show the CSS for each included class in the elements (login button, text entry boxes). In Edge and Firefox, only the CSS for the last class seemed to be included.
The site is https://avonctnhs.org
Does anyone have any idea what is going on here? The classes are set in HTML, there is no JavaScript adding the classes at runtime, etc; just HTML loaded from a file on a server.
Thank you so very much.
Edit: I spent a while searching and the only answers I could find where for people trying to add classes in JavaScript or people with typos that didn't work in any browser.
Additionally, all the code that should be needed should be visible with a nice quick inspect element.
Your CSS files fail to load because your page relies on HTML imports which is not supported by all the browsers.
Your source code has the following lines which should be replaced.
<!-- Additional Headers -->
<link rel="import" href="/core/custom-elements/text-input/text-input.html">
<link rel="import" href="/core/custom-elements/button/button.html">
The above lines can be replaced with the below code which is actually the contents of the above two files.
<script src="index.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
This should fix your issue. Here is an excerpt from MDN which states Firefox doesn't yet support HTML imports.
Firefox will not ship HTML Imports in its current form. See this status update for more information. Until there is a consensus on the standard or alternative mechanisms are worked out, you can use a polyfill such as Google's webcomponents.js.
i was wondering if it was possible to completly change the site, when viewed in IE?
Like have a site that would only work in IE?
As of right now, my site doesn't work quite as i wanted it, in IE9 or below, and i thought of making a different site simply saying something in the lines of "Your browser is outdated, please update 'LINK' ".
I dont want to put a banner on my website, as the website will still be seen behind it, and trust me, it is really ugly in IE9 and below.
Unless i can make the banner take up the entire page somehow?
Please help a new guy..
Cheers!
You can use something like WhichBrowswer to detect what browser/version someone is using and then redirect them to another page. All of this can be done in a few simple lines of js
An example:
$(document).ready(function() {
Browsers = new WhichBrowser();
if(Browsers.isBrowser('Internet Explorer', '<=', '9')) {
window.location.replace("http://example.com/upgrade-browser");
}
});
Use conditional statements in the head of your html (index.html) document that will specify what to do with specific IE browsers. See below for example for an IE 9 or less stylesheet. Below is saying if the user is on IE 9 or less then use this stylesheet and you can write specific styles. Also see the article link below for a detailed explanation.
<!--[if lte IE 9]>
<link href="/css/ie.css" type="text/css" rel="stylesheet" media="screen, projection" />
<![endif]-->
Reference - http://www.quirksmode.org/css/condcom.html
I'm trying to get my website compatible with internet explorer. It looks great in chrome, safari and firefox, but i's very wrong in IE.
Is there any way to make it compatible, without changing or creating another css ?
search for IE style sheet. You have to tweek it a little with the elements that you need to change for IE in the new stylesheet. Read up here about it
Put this within the <head> tag of your file
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
Another that I like to use is javascript to use the same stylesheet but uses css selectors like. .ie .container for internet explorer
you can download it here it's called CSS Browser Selector
I looked at your code (before you edited out the link from the question), and the first thing that jumps out is that you've got two X-UA-Compatible tags, one saying IE=8 and the other saying IE=edge
You should only ever have one of these tags, and in most cases it should only ever be edge.
Get rid of the other one; it is causing problems.
This is one of the strangest things I have ever seen. In the HTML file I have this link tag -
<link rel="stylesheet" href="../../Classroom/engine/repository/PAGE_010100027/css/custom.PAGE_010100027.css">
The CSS is properly loaded and interpreted in all browsers save for IE10. I added the type="text/css" attribute in case the MIME type was somehow wrong -
<link type="text/css" rel="stylesheet" href="../../Classroom/engine/repository/PAGE_010100027/css/custom.PAGE_010100027.css">
Still no dice.
So I copied the file and renamed it wtf.css (just for giggles) and changed the link tag to -
<link rel="stylesheet" href="../../Classroom/engine/repository/PAGE_010100027/css/wtf.css">
It loads and interprets perfectly in IE10. :-/
We can name the file anything we want other than *custom.PAGE_010100027.css* and it will load fine in IE10. Even just changing one number. Does anyone have an idea why this isn't working? I'm stumped and I cannot find anything on the web concerning the naming of CSS files for IE10 and the other couple of hundred CSS files in this project using this naming convention load and interpret just fine. Thanks for any insight!
UPDATE I have confirmed that it is an odd caching issue of some sort. Whenever cache-busting techniques are applied the CSS file is loaded and interpreted correctly. Removing the cache-busting techniques causes IE10 to revert to a much older stylesheet. This only occurs on this one page (out of a couple of hundred).
In reading about related IE10 issues it could be related to the OS (Win8 versus Win7) and this setting: "Use TLS 1.0" (unchecking may solve the issue).
I read this answer to another so question, which is exactly what I need. Although, as stated in the answer, it looks bad in IE7. I would like it to look ok in IE7. The first column does not need to be fixed in IE<=7, but the table (and the first column) should be readable.
Does anybody have any idea how to hide some parts of the CSS in IE7, so it looks like a normal table? If so, you can always fork http://jsfiddle.net/emn13/YMvk9/ to show me :)
You could write a separate stylsheet for IE to use:
<!--[if IE]>
<link href="/style/ie.css" type="text/css" rel="Stylesheet" />
<![endif]-->
<!--[if !IE]>
<link href="/style/core.css" type="text/css" rel="Stylesheet" />
<![endif]-->
This will force IE to use the rules you specify in ie.css so you can give it the rules you want there. This will also hide the other parts that are used in Google Chrome and Firefox from IE.
The second stylesheet there will be used only if the browser is not IE so if everything displays correctly in Chrome and Firefox, you can leave those rules untouched. Then just copy the rules you need for IE into it's stylesheet.
Best practice is to write the CSS so that it displays the same in all browsers, but this is a lot less frustrating!
Hope this helps
Reference: http://www.quirksmode.org/css/condcom.html
I fixed the issues and attached the files http://jsfiddle.net/fJJvG/2/. One thing, you must download the jquery plugin from http://jquery.com/ and put in your header. then you will get the result.