View Source: Designing and Testing Sites for Internet Explorer 8

Body: 

Internet Explorer 8 is out! It’s faster than earlier versions of IE, and it has loads of new features to improve the Web browsing experience for Windows users. But for us Web designers, IE8 brings both good news and some bad news.

First, the good news: IE8 provides nearly complete support for CSS 2.1, which brings that browser’s CSS support more in line with Firefox and Safari and lets you use new CSS tricks on a wider audience. In addition, improvements to how the browser handles JavaScript can mean speed improvements for sites that rely on JavaScript.

On the downside, IE8 adds one more browser to test your sites in. This is particularly important since IE8, by default, displays using what’s called "Internet Explorer 8 Standards" and does not display or work the same as IE7. What’s worse, if you’re not careful, IE8 can sometimes ignore all of its fancy CSS and JavaScript improvements and revert to displaying pages like IE7 or even IE5!

In this article, I’ll tell you what to do to test your sites in IE8 and how to get your sites ready for IE8. I'll also discuss some of the CSS improvements in IE8 as well as show you one new CSS trick to add to your design arsenal.

Testing Options
First let’s talk about how to test your pages for Internet Explorer 8. While many Web designers use Firefox or Safari, most Web surfers still use Internet Explorer. The Web statistics firm Net Applications says that 66% of Web surfers in March 2009 used IE, with 46% using IE7 and around 20% using IE6. Unfortunately, testing for Internet Explorer can be tricky. Mac users can’t run Internet Explorer, and Windows usually won’t let you run more than one version of Internet Explorer, so if you install IE8 on Windows, you won’t have access to IE7 or IE6 on the same computer. But there are some solutions that don’t require buying a few extra Windows computers.

Windows users can turn to two free tools that let you run more than one version of Internet Explorer on your computer. First, Microsoft’s own Expression Web SuperPreview lets you preview your Web pages in IE6 and either IE7 or IE8. However, while SuperPreview always lets in you test in IE6, the second testing version is limited by what’s installed on your computer. In other words, if you have IE8 installed you can only test using IE6 and IE8, not IE7.

Another option is IETester (Figure 1). This free program from DebugBar provides a single application that can preview a page in IE 5.5, IE6, IE7 and IE8. It’s an alpha product, so it still has a few rough edges -- for example, it doesn’t always runs JavaScript the same way that a standalone version of IE does -- but it’s a simple, straightforward way to see your design in multiple versions of IE.

Figure 1. Using IETester, you can test a Web page in IE 5.5, IE6, IE7, and IE8. Click on this image to see a larger version.

Mac users have a few options as well, most of which involve using Windows and either the SuperPreview or IETester programs mentioned earlier. You can buy a Windows computer, or if you have an Intel Mac, you can use BootCamp to install Windows on your Mac. Then you can boot up as either a Mac or a Windows machine and test your pages. A third option is to install virtualization software like VMWare Fusion or Parallels Desktop on your Mac. This software lets you run a virtual Windows machine, side-by-side with the Mac OS, and you can jump between the Mac and Windows and test in various browsers in both operating systems. It's the most efficient testing technique for Mac users. But both Boot Camp and virtualization software require a copy of the Windows OS. The simplest home version of Vista is fine (but still around $200).

Another way to test designs in multiple Web browsers is to use one of the many cross-browser testing services. These services work for both Mac and Windows users and don’t require that you setup multiple OSes or Web browsers on your own computer or computers.

Most of these services open one of your Web pages in various operating systems and Web browsers and then take screenshots and send the shots to you. One such service is Litmus, which not only takes screenshots of pages in different browsers but even lets you see how different e-mail clients will display a given HTML file. The company also offers a Mac-only application designed just for testing Windows browsers. Unlike many screenshot services, Litmus provides a very fast response. Some other services take an hour or more to return results, making quick Web site development difficult. The downside is that this is a pay service, and doesn’t come cheap -- $24 for one day, or $49 per month.

A different approach to cross-browser testing is offered by CrossBrowserTesting.com. Instead of taking screenshots, this service lets you remotely view another computer -- in other words, you can actually interact with a Windows machine, running Internet Explorer 8, 7, and 6, plus Firefox and Safari (Figure 2). This not only lets you test the visual design, but also lets you interact with the page and test how your JavaScript programming works in that browser. This service is free in five-minute blocks, but only when paying customers aren’t using all of the computers. Or you can buy priority service starting at $1/five minutes or $20/month.

Figure 2. The browser testing service from CrossBrowserTesting.com lets you use a remote computer to view Web pages live -- you can even test Flash, JavaScript, and other interactive elements on a Web page. Click on this image to see a larger version.

Sadly, none of these testing services let you preview local files for testing. You have to move your Web pages to a publically accessible Web server.

When IE8 Acts like IE5 or IE7
Internet Explorer 8 displays pages using "Internet Explorer 8 Standards," which is just another way of saying that Microsoft has joined other Web browser manufacturers and built a browser that’s much more closely inline with Web standards like CSS 2.1. However, in some cases, IE8 will display a page like IE 5 and other times like IE7! To make sure it displays a page using current standards (like those supported in Firefox and Safari), you need to do a couple things.

Use a Doctype
A doctype is a bit of code at the top of your Web page (before the <html> tag) that announces what type of HTML you’re using. Four standards are common these days: HTML 4.01 Transitional, HTML 4.01 Strict, XHTML 1.0 Transitional, and XHTML 1.0 Strict. For example, the doctype for HTML 4.01 strict looks like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

If you leave off the doctype, IE8 will display your Web page in what’s called "Quirks mode." (I’m not making this up.) In this case, IE8 behaves a lot more like IE5. In fact, every browser exhibits its own quirky behavior if you leave out the doctype. Fortunately, many Web site design programs, such as Dreamweaver, automatically include a doctype when creating a new page. If you’re hand-coding your pages, you’ll find the proper doctypes on the Web Standards site. If you use these templates as the basis for every new Web page you make, you’ll be sure to have the proper doctype.

Ignore Compatibility View
But even with a proper doctype, you’re not out of the woods. Because some sites are built to accommodate the non-standard behaviors of IE6 and IE7, IE8 may appear to break these sites -- in other words, because IE8 now supports Web standards better than earlier versions, sites designed specifically to look good in IE7 may not look the same in IE8. In this case, users can choose a Compatibility View option in IE8, which essentially makes IE8 act like IE7. Yikes.

What’s worse is that Microsoft has created a Compatibility View list that contains sites that Microsoft has decided look better in IE7 than IE8. If a user turns this option on -- which is easy to do when you’re installing IE8 -- then a visit to a site on that list will actually be displayed as it would be in IE7. In other words, even if the site is built to perform best in the most standards-based browsers like Firefox, Safari, and Opera, if it appears on the Compatibility View list then IE8 will display the page as if the browser were IE7.

At this point, that list contains only big Web sites that Microsoft has tested, so odds are your site isn’t listed and won’t be displayed using Compatibility View... yet. However, Microsoft is tracking sites when a user chooses the Compatibilty View option, and if this happens enough times when people visit your Web site, it could end up on the Compatibility View list, potentially making your carefully crafted, standards-based Web site look bad in IE8.

There is a way to sidestep this whole mess: tell IE8 to just be IE8. By adding a single META tag to a page, you can instruct IE8 to ignore Compatibility View and to always display a page using its most standards-compliant mode:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Put this instruction in the <head> section of the page (below the <title> tag’s a good place.) This tag will work for future versions of IE, too: the "IE=edge" part of the tag will instruct versions of Internet Explorer that are released after IE8 to also display Web pages using their default standards mode. Unfortunately, you’ll need to do this on every page of your site.

Now For the Good News
On the bright side, IE8 supports almost all of CSS 2.1 by adding support for various CSS properties and also fixing many of the bugs in earlier versions of IE. In other words, you can create a design that looks great in Firefox and it will most likely look the same in IE8. Microsoft has published a list of CSS changes in IE8 at their Web site.

Thankfully, many bugs related to floats, margins, padding and element positioning have been fixed, meaning it’ll be a lot easier to use CSS for page layout.

As part of IE8’s support for CSS 2.1 properties comes support for something called generated content. This technique lets you add content to an element using CSS -- the actual content won’t appear in the HTML, but will be added when the page is displayed in a Web browser. Generated content is a fun addition that can let you do things like this:

* Use font dingbats for bulleted lists instead of the normal circles or squares.

* Precisely control how numbered lists are written: for example, you can use lower-case Roman numerals followed by a period before each numbered list item.

* Automatically insert a URL next to a link. For example, if you have the text "Click here to visit CreativePro.com", you can instruct the browser to automatically insert the URL after the text so that it looks like this: "Click here to visit CreativePro.com [http://www.creativepro.com/]." This is particularly useful when using a print stylesheet because you can have full URLs appear when the page is printed out, making it possible for someone reading the printed page to easily access a referenced Web site.

* Add text or graphics before or after any element on a page. For example, you could precede every heading 1 tag with the text "CHAPTER: " or insert a groovy dingbat after every link on a page.

Here’s a quick example of generated content. Say you want to place a quotation on your Web page. If it’s a single paragraph, you might use a single <blockquote> tag like this:

<blockquote>
What's in a name? that which we call a rose
By any other name would smell as sweet;
</blockquote>

To highlight that quote and to add some visual flair you might want to insert a graphic of an opening quotation mark (“) at the beginning of the phrase and a graphic of a closing quote mark (”) at the end of the phrase (see Figure 3 below). Of course, you could manually insert images using the image tag at the beginning and end of the text, but it's more efficient to let the browser take care of it. Here’s the CSS you could use:

blockquote { 	font: 18px/200% "Trebuchet MS", 
Arial, Helvetica, sans-serif; }
blockquote:before { 	
 content: url(openq.png); 
 margin-right: 10px; 
}
blockquote:after { 	
 content: url(closeq.png); 
 margin-left: 10px; 
}

The first style sets the font size, font family, and line height for the blockquote tag. The second style uses a special CSS selector -- :before -- added in IE8 (and available in Firefox, Safari, and Opera). It lets you specify a style for what goes before any content in the blockquote. In other words, it lets you put content (like the quote mark graphic) before anything else in the tag.

The "content: url(openq.png)" part of that style uses the CSS content property. The property can accept text -- for example, content: "CHAPTER: " -- or, in this case, a URL or path to a graphics file. If that graphic was in a folder named images, then the property would look like this: content: url(images/openq.png). Notice that while you don’t have to put quote marks around the url, you can, so content: url("images/openq.png") also works.

The margin property in the second style merely adds a little room to the right of the image, so that the text following doesn’t bump into it.

The third style is basically the same, except that it uses the :after selector -- in other words it inserts another graphic after all of the text in the quote.

Figure 3. Using CSS you can insert graphics at the beginning and end of an element. Looks great in Internet Explorer 8 (top), and Firefox (bottom). Users of IE7 and IE6 won’t see those quote marks. Click on this image to see a larger version.

While support for new CSS properties is handy, the most important contribution of Internet Explorer 8 is its support for CSS 2.1, and most notably that it fixes the problems in earlier versions of IE. Eventually this will make Web design a lot easier, since the latest versions of all current browsers are finally displaying pages similarly, if not identically. Now, if we could just get rid of IE6 and 7.

Liked This? Read These!

Microsoft Corp. today released to the public Windows® Internet Explorer® 7 for Windows XP, the latest version of the world's most popular Web browser. Customers can upgrade and browse the Web with... Read More
This video excerpt is from Bring Your Web Design to Life: Creating Rich Media Websites with Adobe Creative Suite. Copyright © 2009. Used by permission of Pearson Education, Inc., and... Read More