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.
Related
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 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.
I created my website using a mac. As you know I can't test it out using Internet Explorer, I left it for the last but expecting layout disasters. The website looks perfect in Chrome, Firefox and Safari. As expected, IE shows it differently. How should I move on from here?
Create a style sheet just for IE?
Update my existing style sheet to display the website as expected in all the browsers I mentioned earlier?
To me, (1) seems to be the easiest choice so that I can tailor my CSS to display properly in IE without worrying about Chrome, Firefox and Safari. Do you think this is ok?
Thanks!
You can target specifically your stylesheet for IE only. You will need to put condition code on heading section of the page. See below for examples.
For all IE
<!--[if IE]>
For all IE
<![endif]-->
If you just want to target to specific version of IE then
<!--[if IE 7]>
For only IE 7
<![endif]-->
There are a couple things you can do.
Conditional Comments
Example of a conditional comment to target all versions of IE
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
You can find more conditional comments http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Validate Your Css fixing some obvious markdown mistakes may improve your code immensely.
Which version of IE are you targeting? Most of the major pains with IE CSS2 bugs are in IE6, and to a lesser extent, IE7 - however IE8 and IE9 are much better and I haven't experienced any bugs that would require them to have separate stylesheets.
If you are targeting IE6/7 then you have my sympathy, but I don't see why you should bother as IE6 usage is negligible nowadays. However, if you must, then conditional comments are the least painful way of managing the problem. Simply do this in your <head> element:
<!--[if IE 6]>
<link rel="stylesheet" href="ie6patch.css" />
<![endif]-->
Read more here: http://www.quirksmode.org/css/condcom.html
Also, don't forget to add <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to your page force IE8 and IE9 to use Standards mode.
In the future you can use a css reset to minimize differences between browsers. I have used this one in the past: http://developer.yahoo.com/yui/reset/
Also consider using a template like http://www.99lime.com or similar.
Check out conditional comments.
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
Just made a site using great standards compliant semantic HTML and CSS. It looks great in Gecko, Web Kit, but IE7 mangles it (of course). Any progress yet on this front, or do I have to go through a tonne of hacks as is standard with IE.
Try this
<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE8.js"></script>
<![endif]-->
Or you could write a separate css file for IE7
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css" type="text/css" />
<![endif]-->
There are several well-known hacks for hiding IE-specific demangling rules from comformant browsers. Most of them depend on IE mis-parsing certain things, e.g. "* html ... { }" which other browsers will ignore. A simple google search will show any number of these.
My rule is first to make the page work in FF (or similar), and then break it so it works in IE.
I find that developing a site first for IE, then adapting it to other browsers is less time consuming than the other way around. But, it's a little late for that!
I would suggest that you have a separate CSS file for IE (just copy and paste and rename current CSS) then have a browser sniffer and script that requests the IE CSS for IE users. Then rewrite just the IE CSS. Does that make sense? At least that way, the site is still up for the other browsers and you're just working on IE.