Google Chrome Frame for Internet Explorer

Long story short, Google released a plugin for IE 6, 7 and 8 that will run Google Chrome (which uses webkit) inside a frame in the IE browser. Now IE6 can be standards-compliant, and all versions of IE get blazing fast javascript and HTML 5 support. Sounds great, but there are some problems, as lifehacker points out:

“The (most) obvious question: Why would I install this plug-in rather than switch browsers to Chrome? The folks at Google point to IT lockdown that won’t allow users to install a new browser; Ars wonders whether such restrictive IT departments would be any more likely to approve this plug-in. If nothing else, it’s a pretty bold move on the part of Google.”

If you’re interested, Jim Ray dug into the details of how it works. Personally, I don’t think this will solve anyone’s IE6 problems, but it’s a fascinating development, and worth keeping an eye on.

“The irony here, as I see it, is that an old, insecure feature Microsoft built to try to beat Netscape is now being used by Microsoft’s biggest current rival to patch IE.”

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

Hansel and Gretel: Attempted Cannibalism, Grand Larceny, Immolation and Getting Lost

“In the original story, Hansel & Gretel’s stepmother persuades their father to lose them in the forest during lean times so the whole family won’t have to starve. The suspicious and resourceful Hansel spoils the plot by dropping pebbles on the way in and following them home. But the next time(!) Hansel is forced to use breadcrumbs instead, which prove to be a less-than-suitable substitute since birds eat them before Hansel and Gretel can retrace their steps. Eventually the tale devolves into attempted cannibalism, grand larceny, and immolation, but basically it’s a story about how unpleasant it is to be lost.”
– Steve Krug, from a footnote explaining breadcrumb navigation in Don’t Make Me Think

Clipping Zoe's Toenails

Clipping toenails

Since Zoe was very little, it’s been my job to clip her nails. The funny thing is, you would expect a small child to resist this, but Zoe has always been fascinated with the whole process. She sits calmly in my lap, and holds out her hands and feet. Once she got big enough, we had to strike a deal where she gets to carry around the clippers for a few minutes once I’m done. I’m not sure what the appeal is for her, other than OOH SHINY, but I’m glad she lets me do it.

IE8 Compatibility Mode and IE7 are Not the Same Thing

Just so we’re clear, testing your website in an actual copy of IE7, and testing in IE8′s Compatibility Mode are not the same thing. Compatibility Mode does an acceptable job of imitating IE7, and for the average user who’s just trying to fix a site that looks broken under IE8, it’s good enough. However, there are lots of small differences, and if you’re only testing your client sites with Compatibility Mode, it could come back to bite you.

On the IE Blog, Tony Ross published a list of mostly technical differences between the two. Perhaps more useful for web developers is this article by Estelle Weyl outlining some of the presentation differences between the two, such as border handling and box model differences.

Why does this matter? Because I’ve heard some otherwise intelligent web developers (including Microsoft’s Expression Web team, which uses IE8′s Compatibility Mode for IE7 testing) claim that testing will be much easier now, since you can test everything in one place.

To be sure, tools like Expression Web or the old Stand-Alone IE installers are helpful, but don’t fool yourself into thinking that they are an accurate representation of a “clean” IE6 or IE7 installation. To test against those, you’ll still need to resort to more thorough measures like keeping separate machines around, or using the free Virtual PC images for IE6, IE7, and IE8.

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.

How to Avoid Paragraph Gaps when Using Superscript and Subscript

Frequently, when I see a webpage with superscript or subscript text, I see associated gaps in the paragraph. This is caused because the default way browsers render super and subscript text is to add enough vertical space in the paragraph to show them. The result is ugly, but as you can see in the following screenshot, you can easily fix the problem with just a few lines of CSS.

HTML Superscript and Subscript Handling

In the first paragraph, you can see the layout gap problem, and in the second paragraph, you can see the paragraph as it should be displayed, by using the following CSS rules.

sup {
	vertical-align: baseline;
	position: relative;
	bottom: .33em;
}
sub {
	vertical-align: baseline;
	position: relative;
	bottom: -.33em;
}

The browser shifts the super and subscript text by using the vertical-align CSS property, which leaves gaps in the paragraph. By resetting this property to the defaul value of baseline, we get rid of the gaps. Then we restore the appearance of the text by using position: relative; and shifting the bottom up or down by .33em. Since this uses ems, you can use these lines in your reset stylesheet, no matter what font treatment you use on your site. Now go forth, and may paragraph gaps never plague you again!

Note: This was originally posted on my work blog, and I’m re-posting it here for archival purposes.