in ASP.NET application, how to design the pages in such a way that they are displayed properly in both IE6 and IE8 browsers? I would like to minimise the CSS work that I need to do if there are any general guidelines to follow which will work in both browsers. I may still need to tweak here and there, but I want to reduce bulk of the work. Please let me know if there are any such guidelines.
Thanks in advance.
I have been coding a recent project and used the ie7.js script from http://code.google.com/p/ie7-js/. It works marvels at fixing IE 6 to a reasonable level. Then use this block to declare your body. (This part was ripped from html5boilerplate).
<!--[if lt IE 7 ]> <body class="ie6"> <![endif]-->
<!--[if IE 7 ]> <body class="ie7"> <![endif]-->
<!--[if IE 8 ]> <body class="ie8"> <![endif]-->
<!--[if IE 9 ]> <body class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->
You can how polish up any stray css my using the respective id like this...
#ie6 .element{
//special stuff for ie6
}
The ie7.js script should save you quite a bit of time though.
If you add the following line to your section it will force compatibility mode and help minimize the amount of CSS you need to write:
<meta http-equiv="X-UA-Compatible" content="IE=100" />
However, you probably won't get it perfect without writing custom CSS rules.
Start by making sure that basic layout of your page is working cross-browser. This can be quite trick, but the good news is that other people already did the heavy lifting for you. Just google for "one column", "three column", "holy grail" or whatever layout your are aiming for and you will find plenty of articles describing how to achieve it in any browser you want.
Starting for there, my suggestion is to code for IE8 and add hacks for IE6 when required. This should keep the hacks at a minimum since CSS that works in IE8 usually also works for Chrome, Firefox and the other decent browser.
Don't try to make your site pixel perfect across all browser, this will only drive you insane. Let your website "degrade gracefully" on the older browser. IE6 users won't care if the site don't have rounded corners or gradients anyway.
Using javascript to simulate modern CSS features in older browser is also a good idea. But I don't recommend using the ieX.js scripts. These scripts require too much CPU to run and can make your site unresponsive if your HTML is heavy.
Related
I'm looking at tidying the CSS for a large site to optimize it and noticed that throughout there are a lot of the old underscore hacks, e.g.,
_width:200px
I've tried looking online and am having trouble getting any answer post 2010. I'm getting the data through for how users are browsing the site and what browsers they're using but was wondering if it's now generally considered safe to remove these legacy hacks from files?
The underscore hack is only applicable to IE6 and older. If IE6 support is no longer needed, then it is safe to remove all occurrences of the hack (such as the example you have) from your stylesheets as they would otherwise never be used.
Removing these hacks is recommended as IE6 usage is now minimal and keeping your code as clean and hack free as possible is to be desired.
But in the case that a user does use IE6 they should be informed that their browser isn't supported. From the HTML5 Boilerplate:
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
i suggest you simply replace your "hacks" with something like this:
<!--[if lte IE 9]>
<style>
</style>
<link />
<![endif]-->
it will give you the highest amount of control since you can control which versions use which markup.
I test my pages on IE7, Safari, Firefox and Chrome.
I've adopted the idea of adding a class to html in order to be able to write custom CSS tweaks absolutely, positively there is no other way to do it. In other words, I don't abuse this facility.
I use this:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie-all lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie-all lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie-all lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
You'll notice that this is a modified version of the HTML5Boilerplate approach in that I am adding ie-all. The reason for doing this is that, per the title, I am only testing on IE7. Without something like an ie-all class I'd have to choose from one of the other classes for ie tweaks. Other than testing on all versions of IE, who else would I handle this problem?
I do realize that ie-all is equivalent to lt-ie9 at the moment. I fully expect to see this code evolve to have a lt-ie10 class which might change things. Not sure what the best approach is here.
EDIT:
In re-reading my question I thought that most might think that the answer is self-evident: Can't test on IE7 and have it work on newer versions of IE. I thought I should clarify with context.
I have been doing exactly that this for the last few years and have not run into any serious issues. To be repetitive. I have been testing on IE7 and my code has worked without issues on newer versions of IE. It was only when I decided to "modernize" my boilerplate and look at other ideas that I realized that, in some cases, there are folks that must be writing custom CSS for each version of IE.
I have not seen the need to tweak for each version of IE. I have wasted countless hours fixing issues with IE7 that do not exist on Chrome, Safari and Firefox. When I have done so it has always worked fine on other versions of IE. Hence my modification to HTML5Boilerplate and the idea to add a single ie-all class to cover these special tweaks.
In addition to this, I am now exploring fancier JQuery UI ideas that, I thought, might not respond well to only testing on IE7.
If you write standards-compliant code with a standards-inducing doctype and use progressive-enhancement, you will be just fine. These practices alone should ensure that your site will work very well in every version of IE today as well as in the last several years. The reason why people have problems with Internet Explorer today (generally speaking), is because they fail to do one (or more) of these things.
Keep in mind that Internet Explorer 10 dropped support for conditional-comments, so try to ween yourself off of those, depending rather on careful coding and good practices.
To greatly reduce the burden of support all of the necessary software (and hardware in some cases) required for testing across various browsers, check out http://browserstack.com. You can quickly pick an OS, a Browser, and a Version and within seconds have a virtual machine up and running in your browser. You can even use this same service to tunnel into your local server/file-system to test local files.
Code well and wise, and IE won't be the pain that many think it to be.
There have been massive changes in Internet Explorer since IE7, so you absolutely cannot test for 7 and assume that newer versions will work as well. IE7 was released in 2006, and was very poor even by the standards of the time.
Unless you want to have classes for each version, I'd create one for <=IE8, and one for IE9 and above.
You could just write code that works in all browsers, like I do - never had a problem with it.
You should ALWAYS test in different versions. Never assume it will work. I fell prey to this once when I assumed that Firefox wouldn't mess around with the contents of an onClick inline attribute, but it did (replaced it with "more correct" JavaScript and broke other code), the same goes for IE versions.
Your best bet is to use IE10. In its Developer Tools, you can test in all versions of IE from 7 upwards.
I'm working on a small website, but of course IE doesn't view it the same as Chrome or Firefox do. I've read around and found using <--[if IE]> should make only IE use the stylesheet I need.
When I was using Microsoft Expression on a different PC earlier, it worked fine. I came home and started editing in Dreamweaver CS5, now it doesn't work as it should.
I researched it a little and I know that Dreamweaver views it as a comment rather than an if function.
So how can I fix/get around this?
Thanks in advance!
P.S. The whole piece of code I'm using is <!--[if IE ]> <link href="IEcss.css" rel="stylesheet" type="text/css"> <![endif]-->
Edit: I found the answer, I had to close the comment tag before referencing the stylesheet. http://www.quirksmode.org/css/condcom.html
You have a space after IE:
<!--[if IE ]>
Should be:
<!--[if IE]>
Other than that, it looks correct. But the space may very well be throwing it off, because conditional comments have to match an exact syntax – otherwise they get interpreted as regular comments and ignored.
Design-Time style sheets allow you to show or hide design applied by a CSS style sheet as you work in a Dreamweaver document. For example, you can use this option to include or exclude the effect of a Macintosh-only or a Windows-only style sheet as you design a page.
http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7e17a.html
I thought IE7 and above followed the same box model as Chrome/Firefox/Opera, but when I run the following code in IE8 and then in Chrome/Firefox/Opera, I get different results.
In IE8, the end of the box shows up with a bit of a lip that I want to get rid of. Is it possible to use strictly CSS to fix my issue or do I need to use Javascript to detect the browser and then change the CSS?
Here is the link to the code that I am working with. In order to see my problem, you need to use IE and then either Chrome, Firefox or Opera.
http://jsfiddle.net/LsXTk/1/
IE7 has two modes: Compatibility mode and Standards mode. Yet another of a long line of brilliant moves on MS's part with IE. (Yes, I'm being sarcastic):
http://blogs.msdn.com/b/chkoenig/archive/2008/08/28/ie8-standards-mode-and-ie7-compatibility-mode.aspx
What usually trips people up is that, by default, IE8 reverts to compatibility (ie, broke) mode if the page is being loaded locally or from a server on your network. I guess the logic was that it must be a page on your intranet, and since 90% of all intranet web software is horrifically coded IE6 monstrosities that pretty much break in any standard browser, it better assume the code is broken and revert to compatibility mode.
As for detecting IE8, you can do it without JavaScript via IE's conditional comments. What I typically do is wrap the opening body tag in conditionals and give each a unique ID:
<!--[if !IE]> -->
<body>
<!--<![endif]-->
<!--[if gt IE 8]>
<body id="IE9">
<![endif]-->
<!--[if IE 8]>
<body id="IE8">
<![endif]-->
<!--[if IE 7]>
<body id="IE7">
<![endif]-->
<!--[if lt IE 7]>
<body id="IE6">
<![endif]-->
Then in your css, you can easily serve up separate CSS as needed:
.myStyle {for good browsers}
#ie7 .myStyle {fix for IE7}
I have designed a web portal, I have made that website good looking at Firefox browser,
But when I started testing with IE, some issues which works in IE 6 may not work in IE 8,
means back ward compatability is not there in the IE.
You can check my website at cricket scores
In this scenario, which IE version do you think to consider and make my website to work normal.
Edit
As per the below suggestions, I understand that need to create the separate CSS file
corresponding to each IE version like 6, 7,8, 9 and so on in future,
if the number of CSS files increases, wont that affect the performance and loading of the web page
please advice,
Unfortunatley IE does not render things the same as Firefox and is a common problem. The best way is to do IE Specific IF statements and have IE 8 Emulate IE 7. This does require a few additional CSS files, edited for each version. Below is the generic way to have it set up for IE/FF (belongs in head). Normally IE 6 & 7 are viewed the same so you do not need to have different CSS files for them.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<link rel="stylesheet" href="/templates/dchirotemplate/css/style.css" type="text/css" />
<!--[if IE 6]><link rel="stylesheet" href="style_ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="style_ie7.css" type="text/css" media="screen" /><![endif]-->
You can view a site I created with this style sheet setup by going to http://www.decrescenzochiropractic.com
Tip 1: Don't even bother trying to make things look good on IE6. Make it work on IE6 if you must, but if you start trying to achieve perfection in IE6 you'll be in for a world of pain and frustration.
We have officially dropped support for IE6 on our new site; we're not even testing with it.
Tip 2: Look into using some javascript libraries that provide better cross-browser compatibility for IE. Here are some good ones:
Dean Edwards' IE7.js
CSS3Pie
Whatever:hover
Selectivzr
Modernizr
Also consider using jQuery or similar; this is a bigger jump than just compatibility, since it involves changing your coding style quite considerably, but it does provide very good cross-browser compatibility for most of its functionality.
You should use IE-only conditional comments, in the form
<!--[if IE 6]> <p>hello world of bugs!</p> <![endif]-->
This way you can load custom stylesheets, etc.
You should make your site work with all browsers.
A quick and dirty trick for IE 6 and 7 is also the star selector but don't overuse it:
body{
background-color: blue;
*background-color: red /* Only shown in IE */;
}
Fact is IE will be the most troublesome of browsers.
Traditionally, IE has not been compatible, period.
While most of the other browsers were working to be compatible with the standards coming out, MS was trying to be smarter and better than everyone else and doing their own thing. This has caused a lot of problems for many designers. A lot of design books have an entire chapter on dealing with IE's quirks.
Fortunately, it appears MS is finally starting to see the light. To Microsoft's credit, IE8 defaults to a mode that is more standards-compliant that IE7, breaking sites that targeted earlier versions of IE. And, from what I've read, they're as committed as ever to the standards with IE9.
So to answer your question, I'd try and be compatible with the later versions. That way, your site is likely to remain valid for longer. However, any good website designer will test on all the top browsers. I use IE, Chrome, Opera, and FireFox.
I think you are going about this all the wrong way.
Yes, you could create separate style sheets, and you may still have to. However, the markup on your page is absolutely atrocious. You are sending every browser that hits that page into quirks mode, and getting pages to look the same, or even function the same, between browsers when they are all in quirks mode is a chore in and of itself. Don't get me wrong, it can be done, but it takes quite a bit of duck tape and bailing wire.
You should really fix your markup, then assess your css. You can definitely make a page that looks like yours with a single style sheet, even in IE6.