h3. The new solution

“DebugBar”:http://www.my-debugbar.com/ launched “IEtester”:http://www.my-debugbar.com/wiki/IETester/HomePage last -week- month, enabling us to have *one* browser, one interface, with tabs that renders four flavors of IE. That’s versions 5.5, 6, 7 and beta 8 for the time being.

Using “conditional comments”:http://en.wikipedia.org/wiki/Conditional_comments I’ve targeted the various browsers with a simple test. As you can see, IEtester even lets you open the various versions in tabs within the same window. A very nice touch.

!http://img.skitch.com/20080630-mynb2i9a4widmw4swms5gmh128.jpg(HTML test rendering in IEtester)!

The html looks something like this:
(Because of textile and pre not playing well together the dashes “–” have an extra spacing that shouldn’t be there.)

<!- - [if IE 5.5]>
 <div class="fivefive" >
  <p>
    You are using <abbr title="Internet Explorer">IE</abbr>
    older than 6.
  </p>
 </div>
<![endif]- ->

Viewing the same page in the default IE6, where it believes to be the newest IE installed on the system. This obviously will lead to some headslapping, at least in my case.

!http://img.skitch.com/20080630-8rimdedq27funabgdr2adhbuyy.jpg(HTML test rendering in IE6)!

So there you go. You can “view the test page here”:http://thatnorwegianguy.com/playtime/IEtester.html. If you are serious about making websites that work get hold of this little gem. However, still being in alpha, there are some *bugs*. One particular that I’ve come across is that if you open IE6 as the first tab IEtester will crash. Open IE6 secondly or later and there’s no problem.

All my testing has been done on a Mac running XP sp2 on Parallels.

But by making sure my main stylesheet is clean, and use all the CSS2.1 goodness, and even some supported CSS3, the gap can be made even greater. I’m not saying put unnessary code in there, but if it’s done a big site the difference might be noticable for the user. Which then will go “Hey, the internett is faster in this [modern browser] than the other internet!”. 1 down, 3.287.333.207 (huh?) to go.

Disclaimer: I have no benchmarks to prove that there will be a noticable difference in speed. But I like to think so!

Now you have your perfect semantic validating SEO friendly nested list in order to make the drop-down menu the client wants. The CSS is in place and the dummy you’ve thrown up works.
But when you implement it into the site the drop-down partly hides behind the content further down. Offcourse – it has an higher z-index. Easy fix. But then the juggernaut IE comes along and crashes the party.

In all IE, any element that has position:relative and haslayout=true
forms a stacking context. This is not correct, it would need to have a
z-index to act as a stacking context.

Assume you have two stacking contexts:

• B follows A.
• B is higher in the stack, nearest to the user.

A
B

No matter what z-index you choose for it, a child A-x will never leave
its stacking context A.

A. A-1, A-2, A-3 ….
B

No child of A will ever be higher in the stack than B.

A real life example

In my case I had a #header which erroneously formed such a stacking context,
because of

#header {position:relative; width: 920px;} /* haslayout = true */

And there is a regular stacking context following:

#main {position:relative; z-index: 1}

Thus:

#header
#main

No matter what z-index I chose for it, a child (#menu) of #header would never
leave its stacking context #header.

#header #menu
#main

The #menu inside of #header would be painted over by #main. And even if
#main is transparent, the drop down #menu will loose mouse focus and
collapse.

The solution

What it finally came down to was to apply z-index: 2 to #header, to
have the entire #header higher in the stack, nearer to the user, than
#main.

Thank you:

I could have never done this without the help of Ingo Chao and the ever useful css-discuss list.

1. Click “Start” and open the Controlpanel.
2. Doubleclick the Display icon to open the Display settings panel
3. Select the Appearance tab
4. Then select the “Effects…” button
5. Make sure the checkbox next to “Use the following method for font smoothning…” is checked ²
6. Select “ClearType” from the dropdown
7. …and click OK, and then enable or ok again

That’s it. You’re done. Now your eyes will thank you for making it less stressfull looking at the screen all day.

If you want to know more check out Wikipedias entry on font rasterization.

1. None of this applyes to Windows Vista, as it is enabled by default. But feel free to correct me.
2. My version of Windows XP is in Norwegian, so my translations are likely to be somewhat off from a English version.

Westciv’s XRAY is a javascript bookmarklet that lets you click on items in your webpage and view some of the CSS information regarden the area you’ve selected.

Microsoft has their own IE Developer Toolbar that is similar to the Firefox Firebug plugin. It lets you inspect and alter the DOM, change settings, outline elements, find CSS etc.

That should make the bughunt slightly easier for everyone.

Update: I’m running multiple IE’s, and as a result (I assume) the webtools only work in IE7.