Here it is. The second Internet Explorer beta release. To find out as much as you wish to about the new beta, visit that link. I only go through a few of the so-called new features that were announced.

In March, the IE team announced that IE8 would be standards compliant by default. Well that’s nice and all, but it still has a long way to go, for it still stands as an empty promise. The horrible thing is that Compatibility View is turning us all away from Microsoft once again. They’re simply breaking their own promise that by default, IE8 would run in standards mode. Read this post at the Register for more info. I knew that this promise wouldn’t be anything to gloat proudly about. You can’t trust Microsoft at all. And I’m still skeptical about their open source initiatives.

If we do not consider that trash that is Compatibility View, however, it has indeed been making nice progress. It’s finally turning into what I call a browser. Turning into a browser my ass.

Anyhow, let’s take a look at some screenshots and what I think of it so far:

I tested BoltPress 2.0′s design in IE8. Still not up to par. Remember the bugs I mentioned when reviewing beta 1? Well they were fixed, but BoltPress 2.0 in IE8 still doesn’t look anywhere close to in other browsers… at least I notice most prominently that list images now display properly, like those in Firefox and Safari.

One new feature (doesn’t deserve that title) related to interoperability and IE8 is Compatibility View, for sites that were designed for IE7. If they are a mess in IE8′s standards mode, one would pray then hit that button, which incidentally had to be placed between the address bar and the Refresh button, of all possible places! That’s only the tip of the iceberg: worse, intranet sites are displayed, by default, in Compatibility View! What the hell kind of a decision was that?!

Here are two screenshots, one showing BoltPress 2.0 in IE8 standards mode and the other showing it in the new Compatibility View, one of the features I, along with many others, strongly disagree with because it simply doesn’t make sense, especially for intranets:

Notice how the search text has been disgustingly clipped to occupy only the area superimposed by the background. Now THAT’S new!

But also notice that images defined with the list-style-image CSS property don’t hug the text for dear life anymore. Compare with how it’s rendered in Firefox and Safari:

list-style-image in Firefox and Safari

Neat.

What were once Activities are now known as Accelerators. I don’t understand why the change, I thought Activities made more sense than Accelerators. But whatever:

IE8's Accelerator Menu

All you do is highlight a phrase, address or any other block of text, click the blue Accelerator icon as shown above, and choose what you’d like to do. All from the page you’re viewing.

I’m not blindly promoting some innovative feature of IE8, of course, since Mozilla Labs has just come up with Ubiquity. I’m using it, and it kicks a lot of ass indeed, even as an alpha.

They redesigned the new tab page (about:Tabs):

New tab (about:Tabs) page

Finally, here’s Potassium and Thistle in IE8, they look great:

Once again, in spite of the above, IE8 still has a long way to go before actually impressing anybody.

Oh, and, even if IE8 does emerge as a good kid, I still love Firefox.

Shame on you, Microsoft.

What about me? I have mentioned and ranted about IE6 so many times and have already maintained an anti-IE6 attitude for over six months, but ultimately… shall I forsake IE6 for real? Or shall I just wait a while more?

Let’s see now, searching this blog for the term ie6 brings up a whole bunch of posts ranting about Internet Explorer 6. Just so you know, the new theme happens to work very well (though of course not perfectly) on IE6, and it’s all thanks to the magic Holly hack:

/*\*/
* html #div-to-apply-hack {
    height: 1%;
}
/* */

But I continued to spend an hour or two, just on IE6, just to fix only a couple of display bugs. I had to go through about six or seven minor revisions of the theme to accommodate IE6. I’m honestly uncertain how much that was worth at all.

The following sentence from this post announcing Potassium eleven months ago perfectly sums up my attitude toward IE6 during the course of designing NOVALISTIC 3.0:

I may include a couple more star-html hacks just to have NOVALISTIC display sanely in IE6, but I won’t spend any other effort on it.

Now, I’m still as of now deciding on either carrying on with finishing up NOVALISTIC 3.0 “Oltanis” or just starting afresh with a new NOVALISTIC 4.0. You know, perhaps I should come up with some Oltanis screenshots for good measure since I’ve been like 60% done with it for over six months. It doesn’t look good in IE6, but of course I don’t care.

Here are BoltPress’s statistics from its launch on May 31, 2007 according to Google Analytics, click for full view:

Browser statistics for BoltPress in Google Analytics

22.94% of all visitors used IE, and within that percentage, 37.69% used IE6. Or, 536 out of 6200 total visitors used IE6. Do your math, and you’ll get 8.65%. That’s not really a lot. Besides, IE6 usage is fast declining, with the adoption of both IE7 as well as Firefox 3 coming up (31.4 million downloads so far!), so I honestly doubt it to be a long wait before IE6 no longer matters in my life.

Whenever IE6 comes into play when I’m developing a web design, it will definitely rob me of between two and six hours, depending on the design itself. It’s not very nice, especially when your efforts end up only in vain (i.e. IE6 simply refusing to cooperate, etc).

In any case, whether I’m going to continue Oltanis or start over from scratch, I simply can’t find a reason that will really convince me to maintain support for IE6 in my future designs and applications. I simply can’t.

I think I’m about done ranting. What’s your say on this whole should-we-continue-considering-IE6 thing? It’s happening and ongoing — and we all know it. For me, I’m ready. And I’ve been ready for more than half a year. To say goodbye to IE6. I salute 37signals. They must’ve had a hard time working with that pile of trash.

You can get IE8 at its Web site for free.

Here I take a first look at the browser, and point out some of its not-too-great areas. I shall not bash IE8 as much as I did its predecessors because Microsoft is finally genuinely putting in good effort to make their browser better, even though it’s been nearly a decade now.

First I’ll show you a shot of the overall browser window.

IE8 displaying the IE8 welcome page

Just a little note, depending on how you stretch the window horizontally, that arrow will switch between left and right according to the position of the Click the Emulate IE7 Button box relative to the button itself. That’s… cute. You can view the source and take a look at the simple JavaScript of that very page.

Microsoft has said they’ll make IE8 as standards compliant as possible. I don’t know whether or not to forgive them for forgetting to proofread their HTML or something, but…

IE8 beta welcome page does not validate

Anyway, now although it’s entered beta… its rendering engine seems unsatisfactory. There are display bugs, or should I say, regressions, that were not present in IE7 but have stuck themselves into IE8.

For example, one of the little annoyances that I’ve just seen with my upcoming design is that anchor links that were set by CSS to display as block-level elements don’t display as block-level elements. The clickable region only covers the text despite me having set padding, height and other properties.

And yes, this is indeed part of my prototype-final design

Display problems in standards mode not present when emulating IE7

That’s about it. I haven’t bothered to test the new Activities and WebSlices features introduced in IE8 because I’m not interested in them, sorry. Also, I’ve already uninstalled IE8 and therefore reverted to IE7. I think Microsoft might just make IE8 that little bit better… though only time will tell ultimately.

The Internet Explorer development team has FINALLY decided to make IE8 render according to W3C standards by default!

Now, you may be thinking, hot damn that’s gonna be a long wait, and when will IE6 be finally phased out? Well, the latter question I have no certain answer to, but for the former… I’m sure it’ll be worth it. Unless Microsoft screws it up again… but I pray to God that He shall see Microsoft not commit any more such web-breaking misdemeanors as developing IE6 and <marquee> (you do realize Microsoft made that tag right?).

So, anyway, I’d just like to say…

Thanks for listening to us, IE dev team! Your final decision has been a long-awaited one and we thank you for doing your part in encouraging Web standards and interoperability!

Now to rant about my tag cloud and IE’s job of messing it up.

Apparently WordPress 2.3′s tag system changes all whitespace in tags to non-breaking spaces  . I don’t know why WordPress 2.3 developers chose to do that, but unless it’s considered a defect worth rectifying, I can’t do anything about it except hack WordPress on my own (which I’ve never done before and pledge never to do unless under perforce) because WordPress 2.3 has been feature frozen.

Why am I complaining about the whitespace entitizing? Because IE6 AND IE7 both exhibit the Expanding Box Bug upon encountering non-breaking spaces, which, unfortunately, my workaround is unable to fix.

A standards-compliant browser does this (screenshot from Opera 9.50 alpha 1, still world’s most compliant browser):

IE6 and 7 respectively do these (IE7 screenshot courtesy of Nicole, both taken on different dates):

Right now I’ve implemented, under my conditional-commented <style> tag, Microsoft’s proprietary word-wrap CSS property to at least tame this in IE6 (currently thinking of a way to fix it in IE7) but you’ll see pathetically broken words. Still, being the standards advocate and shameless link plugger, I suggest you get Firefox or Opera.

EDIT [7/29]: Attention, especially to the judges, Potassium can be downloaded from this post instead.

EDIT: It’s now called Potassium because I find it more suitable (light grey/silver) and Silver Solemnity was a wee bit too long.

Yes, that’s right, I’m 98% done with my Sandbox Designs Competition entry. You may take a look around and report to me any CSS inconsistencies. Any!

This is also my very first WordPress theme I’m offering for download. Because it’s based on Sandbox, Potassium will be licensed under the GNU GPLv2. I’m choosing version 2 because I’m not too familiar with the GPLv3 yet so I don’t wanna end up in any trouble. Yeah.

Some of the files have been customized here, but all Sandbox files will remain untouched in my public ZIP release.

Due to the SDC’s rules and regulations I will only release Potassium for download tomorrow (the link will appear in this post, below the first paragraph). The deadline is tomorrow at 8:00 am in my timezone, so yeah.

Oh and by the way, I don’t know whether I’ve mentioned it before so I’ll say it right here: NOVALISTIC 3.0 and Potassium will not display properly in Internet Explorer 6. Even more so for NOVALISTIC because I’m sick and tired of wasting time and typing for that pile of shit. About 20% of my SDC entry’s CSS (which is 1100 lines long… about 800 lines without comments and blank lines) is made up of star-html hacks and these:

selector {
    /*
    This takes advantage of IE6's expanding box bug
    and the fact that it doesn't understand min-height.
    */
    height: auto !important;
    height: 100px;
    min-height: 100px;
    /* Other properties... */
}

It’s pissing me off. I may include a couple more star-html hacks just to have NOVALISTIC display sanely in IE6, but I won’t spend any other effort on it. There are so many alternatives:

• Firefox, duh.
• Safari (no, not the world’s best browser)
• Opera suite; fastest ever, you can’t deny!
• Camino for Mac
• SeaMonkey (suite)
• If you’re such a crazed Microsoft worshiper, fine, at least upgrade to IE7 because it’s more standards-compliant though still not quite.

See for yourself. I’m sure it’s happened to you…

Example 1: IE being a pain again

1. Give the box an overflow property

I know this workaround has been around for quite some time, but many sites only say to use:

Example 2: a method many sites offer

/*
The star-html hack is used because IE thinks that the 
element exists within some mysterious parent element.
*/
* html #your-div {
    overflow: hidden; /* Inadequate and obtrusive! */
}

The problem is, as the property says, #your-div will completely mask anything that overflows it. That means it will literally crop images bigger than itself. That’s not right. We want the image to overflow like Firefox and Opera do, according to the W3C specifications:

Example 3: the way things should’ve been

2. Relatively position all images

Some other sites say to add a bit of positioning:

Example 4: position: relative;

/*
It's recommended you either place this at the very top
so it can always be overridden where necessary, or apply
this to only images that are children of a certain element.
*/
* html img {
    position: relative;
}

IE won’t listen to that!

IE will still crop the image, but only in quirks mode when it’s actually following W3C specifications! When you force it into standards-compliant mode with a DOCTYPE declaration, its result is substandard.

Example 5.1: IE still cropping that image, as W3C says

Example 5.2: source code

<!--
Notice that we don't have a DOCTYPE declaration, but
presence of the XML prolog also causes IE to enter quirks
mode because it isn't a DOCTYPE itself.
-->
<html>
<head>
<!-- ... -->
<style type="text/css">
/*
In fact, we used the star-html hack here because by W3C
standards, overflow: hidden MUST beat position: relative;
and therefore in standards-compliant browsers the image
will still be cropped.
*/
* html #your-div {
    /* Width, text, background, border, etc properties here */
    overflow: hidden;
}

* html img {
    position: relative;
}
</style>
</head>
<body>
<!-- ... -->
<div id="your-div">
    <p><!-- text here --></p>
    <p><img src="http://www.example.com/logo.png" alt="Logo" /></p>
</div>
<!-- ... -->
</body>
</html>

How do we get IE to display that image just like Firefox and Opera did above?

3. Coax IE into standards-compliance

Just trigger standards-compliant mode, by adding a DOCTYPE or removing the XML prolog (because the W3C did not make it necessary, but I’m not sure about XHTML 2), and so there you go:

Example 6.1: the result of adding a DOCTYPE

Example 6.2: source code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- ... -->
<style type="text/css">
* html #your-div {
    /* Width, text, background, border, etc properties here */
    overflow: hidden;
}

* html img {
    position: relative;
}
</style>
</head>
<body>
<!-- ... -->
<div id="your-div">
    <p><!-- text here --></p>
    <p><img src="http://www.example.com/logo.png" alt="Logo" /></p>
</div>
<!-- ... -->
</body>
</html>

The width of the box will now remain as a constant 100 pixels, unaffected by the picture.

You want it, you got it; here’s a proof of concept.

Summary

The IE Expanding Box Bug has been a big thorn in our sides for a couple years now. I guess experimenting really does bear some tasty fruit after all

According to the W3C specifications, an object/element wider or taller than its container should just appear, without the container having to resize to fit the element. The container should produce scrollbars if either overflow: scroll or overflow: auto is used:

• The scroll value should force scrollbars horizontally and vertically regardless of content.
• The auto value should produce a horizontal scrollbar if a width is specified then overflown. Likewise for height.

If the container is given a CSS property of overflow: hidden, if a width was explicitly set then everything that goes beyond that should be cropped off, and likewise for height, regardless of positioning.

IE6 doesn’t know this, and proceeds to let the image fly free from the container.

Nice job Microsoft.