What does <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> this and other similar IE code lines mean in an HTML5 document?
If I have to make certain css features compatible to IE8 or lower version, does above mentioned code line or html class as mentioned within it helps?
If #2 answer is 'No', then should I use conditional IE stylesheet as mentioned in this article -- http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
If #3 answer is also 'No', then what should be done to make css features compatible in older IE versions. Any reference website / demo would be a great help!
This is a conditional IE statement. They are only read by IE. Any other browser will read them as any normal comment, note the <!-- and --> at the beginning and end of the statement respectively. IE has special code that recognizes this comment and uses whats inside the comment as regular HTML. In specific to your pasted code above, the IE conditional statement is applying a class of ie6 to the HTML tag. In this way you can provide IE only fall backs for certain elements by first referencing that class in your css selector. For example .ie6 #header {} will only apply to the header if the IE6 class is present, and that class will only be present in IE6 because of the conditional statement.
Following the same style as above, you would use this bit of code: <!-- [if IE 8]><html class="ie ie8" lang="en"><![endif]-->
You could use an IE stylesheet if you so choose, either way you would achieve essentially the same result. I personally would use the above method with the class on the HTML tag, and then a separate css file that is loaded normally called ie.css. Inside this file, you would have nothing but IE styles. Note that with this method the stylesheet does not need to be setup in a conditional IE statement. It's only real purpose in being a separated stylesheet is for organizational purposes. I would also only do this if you have a moderate to large amount of IE conditional code. If you have minimal IE fall-back code, simply include the code next to your the code it is fixing inside your master stylesheet.
You can also expand IE support to a certain extent using things like Modernizr and Selectivizr
All the examples you've discussed in the question are aimed at detecting whether the browser is IE (and the IE version), and then trying to deal with it from there.
Please note that this is not considered best practice.
If you need to handle browser differences and missing features, then the best way of dealing with it is to use a technique called feature detection, rather than browser detection.
What I recommend is to look up a library called Modernizr. This is almost certainly a better starting point for what you're trying to do than any of the ideas in your question.
For fixing specific browser features, The Modernizr team also provides a list of additional libraries called "polyfills". Work out which features you need to support, and look through the list to find a polyfill script that does what you need. Some of them are best loaded via Modernizr; others can be run on their own.
I'd avoid doing any browser or version detection, unless it's absolutely a last resort.
One thing to bear in mind when using polyfills: There are a lot of browser features that are missing in older IE versions. There are also polyfill scripts that will help you implement the majority of them. However, please don't think that you can simply include every single polyfill and turn old IE versions into a more modern browser.
The simple fact is that old IE versions are old and slow. Adding polyfills will make them slower. You should carefully consider each feature, and decide whether it's really necessary to polyfill it. Will the site still be usable without it? In many cases you will be better off simply letting old browsers work without certain features.
As #FDL pointed out, use a conditional stylesheet if you've got a moderate amount of styles to apply various versions of IE.
For minimal positioning tweaks, I use html classes (like ie8 or ie9) and just drop the modifications into my master stylesheet.
For example:
.filter-bar .item { float: left; vertical-align: top; }
.ie8 .filter-bar .item { position: relative; top: 2px; } /* fix a gap in IE8 */
1) It means if you have Internet Explorer version 7 and below, include this class inside the html tag
2) Yes, you can have css like this:
html.ie.ie6 .someClass {
color: red;
}
This will only get applied if IE is version 7 and below
3) You can do that too. Sometimes you need to combine both
4) N/A
Related
I am a beginner in web development and I need help from other experienced web developers. For compatibility issues with IE, I came across Paul Irish's Conditional comments but I am very green to it. Where does the code below go, after doctype html or in the head tag?
<!--[if lt IE 7]><html class="ie6"><![endif]-->
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class=""><!--<[endif]-->
And what exactly is the code in those classes supposed to be with an example please.
The comment block is designed go in place of the html tag, so after the doctype declaration.
However...
With that in mind- I would tend to urge you to not target IE or worse still, specific versions of IE in your CSS.
You should always strive to create a layout, (HTML and styles) which is(are) cross browser compatible, supporting progressive enhancement and graceful degradation. I appreciate this is not always terribly easy, but in increasingly complex sites it is a far better approach than attempting to specifically cater for differing versions of different browsers, instead of learning how to implement CSS/featuresets supported by all.
In the long run, especially if you are learning CSS- you will inevitably experience initial frustration but you will learn a lot more by not using conditional comments.
As noted in the comments on this answer, conditional comments are basically accepting you are, or will be, introducing error, and coding around it - the point is you should never accept you are introducing error in the first place but code to prevent it from arising at all. You should implement fault tolerance in your CSS by using styles and properties which gracefully degrade.
The code you posted would go just under the doctype declaration.
<!DOCTYPE html>
// THE CODE HERE
The class names are given so that CSS can be applied to certain versions of IE since not all CSS works in every version of IE.
For example you could set an element to have a fixed height only in IE8
html.ie8 #someElement {
height: 200px;
}
THAT code in particular goes after the DOCTYPE tag as it is a conditional replacement for the <html> opening tag.
<!DOCTYPE html>
<!--[if lt IE 7]><html class="ie6"><!endif>-->
...etc.
<head>...</head>
<body>...</body>
</html>
The classes (ie6, ie7, ie8, etc.) are meant to contain styling to address styling inconsistencies across browsers.
In this respect, you might want to look at Normalize and Reset which aim to make your life a bit easier in terms of cross browser rendering.
You can replace your html-tag with this, so it goes below the doctype. It sets different classes in the html-tag that you can use both in CSS and JavaScript, if you want to set special styling for a certain browser, or if you want to include fallback-scripts for older versions of IE.
I came across this site Better conditional classnames for hack-free CSS
which explains other different ways of using the conditional comments.
It has descsribed three ways of applying conditional comments:
The “bubble up” conditional comments method
The “preemptive” conditional comments method
The “bubble up” conditional comments method without including the conditional comments in the head of the document.
And for more information on different platforms for using the Conditional Comments go to this site http://conditionalcomment.com which has the various codes you seek.
PHP can go anywhere. If you want to use it for browser detection and alternate CSS, place it in the head. And, use it just like any other PHP string in the body. If you check for many different browsers, browser versions, or OSes, then you might want to make it a file and include the file in the head. Just go to you will get the code: killersites
I am trying to find out if there is a summary for all the css fixes for the classes added (such as lt-ie9, lt-ie8, lt-ie7 etc) in the IE statements as in the code shown in Paul Irish's website: http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
if there is no such summary, do I fix the css issues (and add those fixes I come across in books/online) after actually testing the browsers ?
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
A lot of the time, you won't (or shouldn't) need the IE-specific classes. Writing code specific to a particular browser or version is considered bad practice in today's web; in most cases it is better to detect whether the feature you need is supported, rather than checking the browser itself.
This has a number of advantages; the main one is that it frees you from having to learn about all the browser features out there and which browsers support them. It also means that if someone visits your site using another old browser that doesn't have a given feature, your code will continue to work. But it also has advantages for making your code cleaner and easier to work with in the future. There is a library called Modernizr that does a similar thing to the code you quoted, but adds classes according to features supported by the browser. In fact, the same Paul Irish who wrote the code you quoted is also lead developer for Modernizr.
You can check IE's support for various features in various versions in either http://CanIUse.com or http://QuirksMode.org/css/. CanIUse is better for checking newer browser features, but Quirksmode is better for checking the basic CSS features as it has finer grained details.
Many features that are missing from old IE versions can be implemented via "polyfill" scripts. For example, http://CSS3Pie.com/ is a script that adds support for border-radius, CSS gradients and other features to old IE versions. A lot of the time it's better to simply let the browser do its thing and ignore the missing features (eg rounded corners are nice, but the site won't stop working if they're missing), but if you find yourself needing certain features and you absolutely have to support them in all browsers, there's a good list of polyfill scripts here you can try (that list is provided by Modernizr, by the way, so they should all work well with it).
So for the missing features in old IE versions, you shouldn't need the IE-specific classes.
The only time you are likely to need the IE-specific classes is for dealing with browser bugs.
There isn't a definitive list of all known IE bugs (not that I know of anyway), but there are plenty of sites on the web that give details of them and how to deal with them.
First, make sure that IE renders the page in standards mode. If you're in quirks mode or compatibility mode, you may get issues. Avoiding quirks mode in particular will get rid of the worst of the layout weirdness that historically gave IE a bad name.
If you're in the unfortunate position of needing to support IE6, you will need to know about the various bugs it has and how to work around them. There are quite a lot of them, and being able to segregate those bug fixes so they only apply to affected IE versions is important so your IE classes will come in handy.
Later versions of IE have fewer bugs; IE8 is relatively well behaved and frankly doesn't generally require much in the way of browser-specific bug fixes. IE7 can still be problematic though, and IE6 is just horrible. The key here is knowing when you're being hit by a specific bug, and issuing the CSS fix accordingly.
For this, the answer to your second question is: Yes, you just need to test, test, test, and when you see something in whatever version of IE that is weird, you need to investigate it, work out the cause, and if it's a bug, deal with it as appropriate.
Yep, test in each browser, add any thing required afterwards.
There is a service, which may help you to see css features support.
http://caniuse.com/
So you can see which code will make a difficulties in lower browser versions.
What are pros and cons
if i make 4 different css?
main.css
IE7.css ( in conditional comments)
IE8.css ( in conditional comments)
IE6.css ( in conditional comments)
OR
1 css file for all
main.css + including hack for IE6 +
IE 7 + IE8(if needed)
Pros:
Performance: Saves resources for non-IE browsers.
Validation: You can validate your CSS, and non-IE browsers does'nt have to handle non-valid CSS.
Cross-browser: supports IE 5.5 to IE 8 and probably newer versions.
Support: It's officially supported by Microsoft, contrary to CSS hacks.
Cons:
Maintenance: You have to maintain more files.
Performance: IE will have to make more HTTP requests.
KISS: Sometimes it may be overkill, for one or two rules.
In general, I think conditional comments are better than CSS hacks.
The con against having different style sheets is that you'll have one more HTTP request. I find that totally negligeable against the pros, though:
Cleaner code structure
No hacks = no reliance on broken / undocumented behaviour
Much easier to maintain for people joining the project later
New versions can be added easily (though hopefully, that won't be necessary for IE9 any more)
It's entirely dependent on how much content you have in each file and how you want to group them. The separation of files is for your convenience as a maintainer, not a technical issue.
* html (to hide from IE6) is the only CSS hack you're likely to want to use today. If you need more flexibility than that, then yes you'll want conditional comments, but no that doesn't mean you have to have separate stylesheets if you don't want to. And if you've only got a couple of hacks, you probably don't want to.
eg. in the markup you can add IE-specific classes
<!--[if lt IE 7]><body class="ie6"><![endif]-->
<!--[if (gte IE 7)&(lt IE 8)]><body class="ie7"><![endif]-->
<!--[if gte IE 8]><!--><body class="ok"><!--<![endif]-->
Now you can target IE without hacks:
body.ie6 .foo { ... }
body.ie7 .foo { ... }
I am aware that there are probably other questions regarding this topic. I guess that every web developer goes through this with IE.
My problem:
I am developing a web-based application fully based on Javascript. I am a Mac user. I was really happy that everything worked great in Safari, Firefox and Opera. I then asked a friend with Windows to check it with Internet Explorer, and things don't work as well. My application is very sensitive to the HTML standards.
The main problem is the CSS layout. The JavaScript itself seems to be working properly thanks to jQuery for portability.
My question:
How do you deal with Internet Explorer? Should I create a new CSS that is only loaded on Internet Explorer? Should I create a new version of the application only for Internet Explorer? How do you normally handle this? The application is pretty big both in feature design and in layout design.
Edit:
Using the CSS reset as suggested by Nosredna, already removed almost half of the problems. I guess it really is a good practice. I noticed that SO also uses it.
Do you specify a valid doctype? You can get Internet Explorer to be a bit more compliant by switching it into standards mode. http://msdn.microsoft.com/en-us/library/bb250395.aspx#cssenhancements_topic2
Do you use a browser reset CSS file? That can help bring the versions together. http://meyerweb.com/eric/tools/css/reset/
Be aware of IE's CSS bugs: http://www.positioniseverything.net/explorer.html
For the skeleton of your layout, consider using markup that is known to work, such as http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts or http://960.gs/ for liquid or fixed layouts, respectively.
Keep up with JavaScript differences between browsers. jQuery handles some of them, but not all of them. http://www.impressivewebs.com/7-javascript-differences-between-firefox-ie/
Yeah, IE is a pain. If you want it to work in IE, you really want to test in IE every couple days. You don't want to save the pain for the end--you want to handle the nightmares one at a time.
By the way, if you think IE is a pain, try looking at your page with a mobile phone. The other day I went to REI.com with an iPhone and the middle fifth or more of the screen was taken up by a bunch of garbled markup that rendered as text.
Conditional comments.
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css">
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css">
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css">
<![endif]-->
<!--[if !IE]-->
<link rel="stylesheet" href="normal.css">
<!--[endif]-->
In the IE files, you can use #import to import normal.css, and then override the styles as necessary.
First and foremost, I don't wait until the project is done to consider browser compatibility.
Most of the time for CSS issues there are ways to do things that don't require browser-specific stylesheets to be loaded, so I try to use those solutions wherever possible. For example - if most of your issues are related to box model problems, things like using nested divs in place of padding can help to make sure everything looks correct without the need for separate stylesheets and templates for different browsers.
Browser reset to start. Level the playing field as much as possible and do away with browser defaults. Build your CSS from the ground up. (See: http://meyerweb.com/eric/thoughts/2007/04/12/reset-styles/)
Test early and often across all major browsers during development.
Try to accomplish as much as possible without browser specific hacks. Sometimes you'll need to work in some browser-specific CSS but it should validate (use the W3C Validation tool). Sometimes though there's just nothing for it but a conditional (and maybe even some JavaScript), e.g. fix for transparent PNGs in IE6 (See: http://nettuts.com/videos/screencasts/5-easy-ways-to-tackle-ie6s-transparency-issues/).
If you cannot run IE on one of your development machines, try http://browsershots.org. At least you can get some feedback this way.
Use a debug.css that highlights or outlines divs and other elements. Toss this into your HTML head if needed during development. This can be a huge help.
Use "developer toolbars" where available (IE, Firefox).
EXPECT THAT IE IS GOING TO BE A PAIN, and TEST IN 6, 7 and 8.
Have fun!
Here is how I try to reduce the pain of dealing with IE:
Use a reset.css - Yahoo! YUI Reset or Eric Meyer's Reset CSS
Be careful with floats, clears - they typically cause a lot of cursing.
Be aware of hasLayout bugs in IE, typically adding a zoom: 1 or height attributes helps fix this. Read On Having Layout.
Get the layout working in Firefox, Safari, Chrome, etc while keeping IE about 80% of the way there.
Implement a IE6.css style and an IE7.css style if needed using conditional comments.
Beer, Liquor or other adult beverages.
First, read On Having Layout, which explains how the IE rendering engine works internally. IE's rendering engine is from before CSS. It doesn't properly distinguish between inline and block elements like you'd expect. Instead, in IE an element hasLayout. Or not. This is the source of 99% of IE CSS bugs. So, read that article a couple of times.
As for fixes, I usually use conditional comments. Several reasons:
They are future proof, as opposed to CSS hacks. What if IE9 fixes the hack but not the bug you're using it to solve?
It's valid (X)HTML (conditional comments are just plain comments to everyone else)
It doesn't require javascript. You'd be amazed how many people have javascript turned off.
One remark about conditional comments: Never use an open ended match. That is, never do something like:
<!--[if IE]> <load css> <![endif]-->
<!--[if gte IE 7]> <load css> <![endif]-->
The reason is the same as hacks: make it future proof. What if the next version of IE fixes the bug and you don't need the fixes anymore? Or worse, the "fix" now actually messes up your layout in the new IE version? It's usually best to assume that the next version of IE has fixed the bug that you are working around. I have written a little bit about that back when IE 8 was on the horizon.
I think it would be okay to write a specific css file for IE. I know it is a pain, but because of some possitioning issues, IE6 looks different than all other browswers.
Use this line for your newly created css file:
<!--[if ie6]><link rel="stylesheet" type="text/css" media="screen" href="ie6_style.css" /><![endif]-->
With IE getting around 65% of the traffic, I don't think you can think of it as an after-thought.
Overall, I try to do as much as I can without making a separate CSS file for IE. I'll use come conditional formatting to target it specifically if needed. Overall though, at most you might need to do an IE only stylesheet to get it to work.
Just be sure that you are testing with the proper versions of IE for your audience, as IE 6, 7, and 8 are quite sommon.
As a last resort, when tweaking the CSS just won't fix things, I like to use Rafael Lima's CSS selector script. While it depends on JavaScript (most sites I build do anyway), it provides a convenient way to tweak CSS for different browsers and versions without separate stylesheets.
You can have :
.someClass {
margin-left:1px
}
.ie6.someclass {
margin-left:2px
}
<script>
if (internetExplorer) {
window.location = "http://getfirefox.com";
}
</script>
Keep the markup as simple as possible. Make small changes. Test every change.
I delete it
I would think that developing a new CSS File for use in IE would be considerably easier then re-writing your application, but I don't know what scale and scope your application has that would even render doing that a considerable option. I guess it can depend on what versions of IE you're looking to support.
We're at a point now that most users should have completely migrated away from IE6. IE7 is still a hassle, but nowhere near as bad as 6 was. With my projects, the default setup I sell is IE7 compatibility with code to direct users of IE6 and below to upgrade. If a client wants me to incorporate IE6 compatibility into a site, I typically increase the quoted price by 50% because of how awful of a headache is is to support the browser and how much extra visual code has to be written to make it work.
I know that this may fall into the 'too little, too late' category. That said, I would investing in VMWare or Parallels and create a Windows VM w/ IE6.
As you are developing, you should incrementally check your progress in the browsers that you care about.
That said, with an existing application, I would first make sure that my HTML was valid (there are a variety of validation services at your disposal) then, depending on the layout, I was section-by-section try to get the layout right, using comments to 'hide' the sections that you are not actively working on.
I usually do everything I can to avoid having to create a separate CSS file. There are a lot of CSS & HTML tricks & tips out there that should allow you to make it work in IE6 & up, as well as every other common browser. It just takes time to figure it all out. Unfortunately, sometimes with complicated layouts it can take a lot of time especially when you don't test it as you go.
I let others solve the problems for me. I use Yahoo's excellent CSS files included in their YUI library. They have one file to remove existing formatting for existing labels (e.g. H1 in IE does not look like H1 in Firefox), they have another to give me a default set of formatting that does look the same across browsers, they have yet another to standardize font sizes, and most important of all of them is their grid file. It gives me the ability to build hierarchical formatting of regions and sub-regions on the page very quickly and easily and I know it will work on any major modern browser (Yahoo tests the heck out of it to make sure it does).
It may not be the perfect solution, but it has been more than sufficient for my needs.
I had the same issue in my dev: IE6, FFetc + LAMP + custom MVC, based on Rasmus Lerdorf's article way back when he suggested noMVC-kind of like handle it using includes for headers, footers and the sort. I coded CSS, got stuck with FF not rendering it nicely. I had to go revise my CSS knowledge - I found that a single CSS implementation can render correctly in std. compliant mode(FF) and IE6. I liked that. I was happy with handling any changes using a single CSS file. My advice:
I know you have a Mac, go garage sale-ing (newspapers will tell you where they are), get an old PC for $10 (so far I've found plenty). This'll give you an opportunity to test out IE6 early, while you're at it get a KVM switch as well to access the machine when you need to.
One of the things I've gotten addicted to is IE6's setting - Disable all ActiveX scripts - makes browsing the web without ads a blast, anyways - test out your app with & without activeX settings, and see how well your site does. This has literally saved me hours of 'painful' moments folks above me have mentioned prior.
You prolly know how to test out FF/Opera/Safari with&without scripting
Finally - regardless of how heavy Javascripting your site uses, make sure without scripting the core features (which I'm sure you have lot's of) load properly.
I'm no expert, but sure hope my comments help you out a bit.
Cheery-O
I make sure my websites work natively and perfectly in ie9 , and work in ie8(possibly with features missing).
I prompt everyone that uses an older version to get chrome frame.
I never waste my time for ie7 and older, because using a 6 year old browser is pathetic, and should not be encouraged.
As nosredna said, use a valid doctype (see http://www.alistapart.com/articles/doctype/)
Then check your web site in the w3c validator (http://validator.w3.org/). If it shows no errors (or just a few), then IE should render it correctly.
I wouldn't put much effort in making it compatible with IE6, and just accept the fact that a website can look different in various browsers.
When IE8 is released, will the following code work to add a conditional stylesheet?
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="ie-8.0.css" />
<![endif]-->
I've read conflicting reports as to whether this works with the beta. I'm hoping someone can share their experience. Thanks.
One thing to note:
It does work, BUT if you are loading the page/site local network (e.g. Intranet) it will load in IE7 mode by default! (update - localhost[*] is a special case, that does render in standards mode)
This goes against MSFT's original statement of going STANDARDS by default.
e.g.
http://127.0.0.1/mysite/mypage.php <-- IE8 by default (updated!)
http://localhost/mysite/mypage.php <-- IE8 by default (updated!)
http://machinename/mysite/mypage.php <-- IE7 by default
http://192.168.100.x/mysite/mypage.php <-- IE7 by default
http://google.com/ <-- IE8 by default
[*] - Scott Dickens [MSFT] noted in a comment here on the IE Blog that localhost was a special scenario in the Intranet (often used to develop Internet sites) thus would render in Standards mode by default.
To test what mode a page in IE8 is really rendering in, you can use check the developer tools or use this bookmarklet code (only works in IE8):
javascript:
var vMode=document.documentMode;
var rMode='IE5 Quirks Mode';
if(vMode==8){
rMode='IE8 Standards Mode';
} else if(vMode==7){
rMode='IE7 Strict Mode';
}
alert('Rendering in: '+rMode);
It worked for me – both in quirks mode and in standards compliance mode. However, it does not work when switching to IE8 compatibility mode.
Tools/Compatability view settings
uncheck them all
Thank you for your help. I've discovered the solution, apparently the problem was having each style sheet use its own title attribute. Once I took the title off all but the main style sheet, no prob.
This is a weird issue unique to IE8 - and although I've been told its supposed to work that way, something to do with "Stylesheet Preference" - it only serves to create problems since the solution requires you remove the title which could be helpful when scripting, etc - when you need to call the style sheet.
In any case, not sure if this is a bug, or its supposed to be that way, but I hope Microsoft investigates further.
Thanks
Why even bother writing a separate stylesheet for IE8?
If you've already debugged for IE7, you can force IE8 into compatibility mode, and thus display your code as though IE8 were IE7.
All you gotta do is put this RIGHT BELOW the opening head tag. Anywhere else and it won't work.
And then that's a half hour or so less work on average per project, no intense debugging for IE8 needed!
Even Msn.com does this - kind of ironic, eh?
Wrote a blog post about it recently: http://blog.sankhomallik.com/2009/11/16/stop-wasting-time-debugging-on-ie8-when-you-dont-have-to-or-get-ie8-to-behave-like-ie7/
IE8 renders pretty nice compared to IE7, I have stylesheets for IE6, IE7 and IE8; at first i thought conditional comments were not working for IE8 after a bit of experimentation i found some rules were not beeing applied by IE8 just because i needed to put the ancestor or parent class first, e.g.
i had a class like
.niceclass {some:properties;more:properties;}
it worked only if i changed it for something like:
.parentclass .niceclass {some:properties;more:properties;} or
#parentselector .niceclass {some:properties;more:properties;}
btw in my IE8-only css i have only one overriding rule, the rest is rendered almost like firefox, though thats not making me leave FF anyway!.
For my part I wanted to use rounded borders using css. IE8 on Vista does not support such. And since the graphics were so that the rounded borders would show a nice rounded shadow as well, the page looked terrible in IE8.
I tried using conditional comments, but to no avail, IE8 would not evaluate the if IE expression and thus would not include the external stylesheet.
Then I had a look at putting it into quirks / compatiblity mode, however, this still did not work as the CSS hacks I had used did no longer work for the IE8.
Last but least I found a working CSS hack that will render the page correctly when in compatibility mode.
* + html #test[id] { color:lime }
Now, I do not know if this works for IE7 or below, so you would have at least three
different hacks for each IE release you want to support, e.e.
* + html #test,
html+body #test,
* html body #test
{ color:lime }
I wonder what the next regression of the Internet Exploiter will behold for us.