Having played around with getting to grips with what the new version of IE is now throwing at our sites – after reading a lot of useful articles on this subject (see links below) – I’ve ended up with one method to use which seems to work fine. The idea is to only load the style sheet in our ‘good’ browsers understand and use conditional comments to load in the extra style sheets IE would need.
Just to sum up quickly how you should be dealing with the bugs found in IE6 and unfortunately IE7 now as well – in my humble opinion anyway :)
- use conditional comments to load in the required style sheet only when a specific version of IE is detected:
These comments should be placed after your exsiting style sheet link within the <head> </head> tag and will be ignored by most modern browsers. IE however will read the instructions contained within and load the relevant style sheet on addition to any other style sheet already loaded.
- IE6 bugs should still be adjusted as always – by keeping all hacks within a separate style sheet they will only be loaded if version6 is detected:
This example uses a hack called the Holly Hack – or the Star Hack – and allows explicit rules to be onloy applied in IE. Other browser do not implement rule sreceeded by it whereas IE will use the rules to override any previously set styling.
for further reading on IE6 issues and its display bugs:
- IE7 now poses new challenges as it ignores hacks such as the one shown above. Should you need to apply separate rules for IE7 however – you will need write a new style sheet using the Child Hack:
with IE7 just out now – there will be quite a number of new articles written on the subject, I’m sure – just to give you a few links to start off with:
- just to illustrate the method mentioned above on an example – here is a possible CSS script – for all 3 files: