I've just lost one hour of my life trying to optimize a site for IE. I failed doing it the normal way and I solved it using tricks like these for some divs:
<!--[if !IE]><!-->
div1 for non IE
<!--<![endif]-->
<!--[if IE]>
div1 for IE
<![endif]-->
Now it is working properly in IE, but is it ok to use these kind of solutions?
When I develop a website I always make it clear that different browsers interpreted HTML differently, and that their website may look slightly different in IE than in Chrome, Safari et al, but that the overall appearance, meaning and functions will work. Also I always let them know that I don’t build for IE6 and older, that the website will be visible, but some basic functions and layout principles will not work properly. (I also show them the percentage of users who still use IE6). Does the client explicitely asks for an <IE6 website? Charge extra!
This is the question you should be asking: how important is it to you that your website looks EXACTLY the same in all browsers?
For the rest, optimizing for crossbrowser compatibility can be done with different stylesheets for different browsers. However, I recommend keeping the number of stylesheets as low as possible, and try to use as much as possible CSS-attributes that work for all browsers.
This is a rather bad solution and in my experience in most cases not necessary. You should try to get your markup consistent and not have it change for the different versions (Except perhaps such weird cases like Table-layout for dropdowns for IE6)
However it's okay, to have several stylesheets for the different IE-versions to deal with the bugs of the different IE-version.
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="ie7.css">
<![endif]-->
<!--...-->
<!--[if !IE]><!-->
<link rel="stylesheet" type="text/css" href="standard-style.css" />
<!--<![endif]-->
From IE-8 on, your IE-specific stylesheets should be very vew lines - luckily they are pretty standard-conform from that version on.
Related
I have a glitch on Internet Explorer (all editions, including 8+), where the logo is not displaying correctly. It is displaying perfectly on all other browsers, but the glitch is not being rectified by the file ie.css (which I believe should fix the existing issue. Any help would be greatly appreciated. The website is as below:
http://www.taray-investments.com/
Thanks in Advance
<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
Your code is only loading the ie.css if the version is less than or equal to 8
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="/css/ie.css" />
<![endif]-->
That will load if it's IE at all.
Of course as suggested using PNG instead of SVG is your main goal for old IE versions but I don't believe your site works under IE8- correctly anyway and it's (imo) ridiculous for clients to expect support for IE8- anyway.
I can only guess what is going wrong, but here are some possible problems:
1) Logo is not scaling correctly, in latest versions of IE
2) I saw some transitions in your code, so this might be the issue.
3) Any other svv background related bugs.
First can be fixed with svg inline attributes.
Second and 3rd are unfixable thou.
If you want to suppot any versions of IE older than 11, i suggest using .png instead of svg.
I'm building a responsive site, and as per usual IE7 is very difficult to accomodate. I was wondering if it is possible to switch off ALL media queries just for IE7, and still keep all the styling/layout as it is when in desktop mode?
Well, you don't need to switch of Media queries for IE7 because they are not supported in first place I believe.
The #media CSS code will get ignored.
I assume you are not using a polyfill for it though.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/#media#Browser_compatibility
You can make to different CSS files one for IE7 and another one for the other browsers. To select the stylesheet that fits to the user's browser use conditional comments in the "head" tag of your html file.
<!--[if IE 7]>
<link rel="stylesheet" href="css/ie7.css">
<![endif]-->
<!--[if !(IE 7)]>
<link rel="stylesheet" href="css/normal.css">
<![endif]>
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'm redesigning my Tumblr blog and I use CSS3 Pie to add some eye-candy to Internet Explorer. The problem with this is that CSS3 Pie uses Internet Explorer specific files (.htc) that can only be served from the same domain as the HTML file, which is something I can't do on Tumblr.
The thing is that without that file the website breaks on IE6 & IE7 (I'm using HTML5 syntax and apparently these browsers don't really like it even with some help from Modernizr).
So, do you know any ways of adding such files from another domain than the one that serves the HTML? No matter how hacky it is.
I would suggest using conditional comments for IE to gracefully alert users their browsers are not supported, or to reformat the content for IE users.
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="includes/styleIE6.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="includes/styleIE7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" type="text/css" href="includes/styleIE8.css" /><![endif]-->
Another alternative, which I'm guessing is easier than the ".htc" hack you are suggesting. Is to use a basic java-script redirect. If the user is using IE (less than IE9) redirect them to a simplified, IE only, web page.
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.