First bit of news is that Molly now calls herself an Opera Singer :) – meaning she has joined Opera – her role will be (in her own words): “evangelism and outreach for standards and an open, accessible, multi-modal Web”.  She sounds happy and excited to be joining talents like Jon Hicks and is looking forward to her new work. Wishing you all the very best, Molly :-)

The second bit of news came as quite a shock – Microsoft have gone back on their word. After having been heavily criticised by individual developers and by the standards community for their initial proposal of an opt-in opt-out implementation of standards support in IE8 – Microsoft announced that they would ship IE8 in standards compliant mode by default which at the time was a great relief and seemed like a real step forward for Microsoft who had been making any web designer / webdeveloper’s life hell with the stagnant and badly flawed IE6. We were all positively impressed and looked forward to this new version coming out. Was it actually possible that we were moving forward, getting closer to the web standards?

Now however – it seems that announcement had been no more than a distraction technique -  Microsoft insist on holding back standards support once more, slowing us all down, adding yet again more browsers to support and test in, more inconsistencies and complications…According to the blog post titled “Compatibility View Improvements to come in IE8” by Scott Dickens it is now clear that the promised default standard support will not be implemented as we had hoped. And it does  not end there but gets worse! IE8 will now actually blacklist sites when the compatibility button is used, forcing IE7 rendering.  The implications of this are enormous – and my head is too tired to even get started here… But I do want to leave you with a few related links worth reading:

• IE8 Blacklist: forcing standards rendering opt-in
  (isolani, Mike Davies)
• Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8
  (ALA, Aaron Gustafson)
• Version Targeting: Threat or Menace?
  (ALA, Jeffrey Zeldman)
• From Switches to Targets: A Standardista’s Journey
  (ALA, Eric Meyer)

But don’t worry – the more you work with the code – the more you will understand how to structure your HTML and CSS better, avoiding most if not all IE hacks. And hopefully with IE8 – if we’re lucky enough – we will have a better version yet…
This post is merely a resources collection – to give you a few links to articles, resources and utitlities…

the oddities of IE highlighted:

• positioniseverything – Explorer Exposed!
  “These CSS bugs are all found only in Internet Explorer, versions 5 and higher. To see the demos properly, they must be viewed in IE, of course.”
• positioniseverything – expanding box problem
  “It’s an unfortunate fact that Internet Explorer will always incorrectly expand any dimensionally restricted block element so that oversize content is unable to overflow, as the specs require that content to do.”
• wiki – Internet Explorer box model bug
  “The Internet Explorer box model bug is one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS). It affects CSS-aware versions of Microsoft’s Internet Explorer Web browser for Windows up to version six.”
• quirksmode – CSS contents and browser compatibility
  - compatibility chart
• microsoft – IE blog
  - Mircosoft’s blog on any news concerning IE

various hacks and techniques to fight the IE bugs:

• wiki – CSS filter
  “A CSS Filter is a coding technique used to hide or show CSS markup depending on the browser’s brand and/or version number. Browsers have different interpretations of CSS behavior and different levels of support for the W3C standards.”
• tantek’s box model hack
  the famous box model hack – to fix the bug for IE 5/5.5
• cavemonkey – The Ultimate IE Hack Guide
  “You’ve designed the perfect website. You’re checking it in all browsers. Firefox – check, Safari – check, Opera – check, Internet Explorer – ah, am I looking at a website? We’ve all been there.”
• kickasswebdesign – Hacks in various flavours
  “There’s an article on the Front End about a new parsing bug that was introduced in IE7 that now allows us to target in ONE stylesheet the different IE versions.”
• glish – LAYOUT TECHNIQUES: hacks
  “If you are trying to do pixel-perfect cross-browser CSS layout, you will often run into problems with IE5x PC because it radically mis-implements the box model as prescribed by the W3C. There are several workarounds for this problem, not the least of which is to simply not design with pixel precision in mind. But assuming you just have to get it pixel-perfect, no way around it, well here are a couple of workarounds that can help you…”
• webcredible – CSS hacks & browser detection
  “The way browser detection using CSS hacks works is to send one CSS rule to the browser(s) you’re trying to trick, and then send a second CSS rule to the other browsers, overriding this first command. If you have two CSS rules with identical selectors then the second CSS rule will always take precedence.”

[image © *chisa, found on deviantart.com]

just came across this icon – the great Firefox devouring the evil IE. It really made me smile… what a nice thought…
It looks like it’s quite old and unfortunately I have no idea who created this graphic. But I liked to so much I had to display it here – doesn’t this just show what you as webdesigner wish could happen…?

Wouldn’t it be great to send out a nice little fox to kill the monster which has been causing havoc with any nicely coded site…? Never having to confront that horrid blue ‘e’ again… no more hacks, ever… well, we can dream…

If anyone knows who created it – please do let me know, I would be happy to give credit where credit is due :)

• 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:
  • css-discuss / Star Html Hack
  • How To Attack An Internet Explorer (Win) Display Bug
  • Holly Hack Fixes Tons of IE 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:
  • To Hack With It – Eric Meyer
  • Internet Explorer 7: Were you ready?
  • IE7 Adoption Rate: Faster Than You Think? – Molly Holzschlag
  • IE7: Were they ready?
• just to illustrate the method mentioned above on an example – here is a possible CSS script – for all 3 files:
  

There are some excellent resources online about hacks, how they work, why you should or shouldn’t use specific hacks … and so much more … It will be important to keep up to date with the latest developments and implement the appropriate changes to your site setups – please reference links provided here.

Just to mention one – commonly used and very reliable – the BOX MODEL HACK by TANTEK:

see original page for more info: tantek.com

It relies on a parsing bug and gives a specific width – only to override it, please read Tantek’s page for the full explanation.

There are other hacks which are equally effective, such as the Holly Hack, and which can be used for the different display bugs IE can throw at us webdesigners, please read this page on positioniseverything.net for details: → CSS hacks and IE7

With the new version 7 of IE now out and available – it seems that conditional comments might be the best way forward. Instead of setting up the hacks where necessary to fix display errors in an extra style sheet which needs to be fully loaded regardless of which browser is accessing the page – using a conditional comment will load a different style sheet if a specific version of IE is detected. This setup allows for tageting of the different versions of browsers and will enable us to set up different style sheets, customised to fix display bugs specific to the IE version found.

The conditional comments use the HTML structure and can therefore only be used on the HTML page itself.
Please refer the original page on quirksmode.org:
→ conditional comments

As the code is uses the comment syntax – all modern browsers will ignore the conditional comment whereas IE is programmed to read and implement it. You can therefore use it to attach specific style sheets to a page only when a relevant version of IE is detected.

I decided to stick with the page redirection – if flash is not found on the user machine and the browser will display a different page instead which replaces the 2 flash movies with static gifs – and add a browser detection script to re-direct IE onto this same page, avoiding the flash alignment problems.

Just to keep track of the scripts used and some resources…

flash detection scripts:

• Colin Moock MOOCK FPI [fLASH pLAYER iNSPECTOR]
  now no longer in development – I found this an excellent Flash detection script to use
  Colin points to the now more up-to-date flash detection from Adobe
• Adobe Flash Player Detection Kit
  available as download – the kit contains various methods of plugin detection and more with plenty of documentation

browser detection:

So here a few useful articles to read (courtesy of the WSG):

• New Headaches? – Dave Shea, mezzoblue.com
• Cascading Style Sheet Compatibility in IE7 – MSDN, microsoft.com
• Details on our CSS changes for IE – IEBlog, microsoft.com