bc_096970_ch16

16 Using Dean Edwards’s “IE7” In this chapter, I explore some very useful solutions for getting CSS to work in most browsers in use today. In this chapter I discuss the following: ❑ Dean Edwards’s “IE7” JavaScript (not the browser from Microsoft), an open source pack- age used to implement CSS standards in IE 6 and less without upgrading the browser itself ❑ Installation of an HTTP server, the software used to transmit web pages from server to browser, which is required to use the “IE7” package At the time of this writing, IE 6 exhibits more problems than any other browser in terms of sup- port for CSS standards. This chapter focuses on techniques that web designers use to bring IE 6 up to speed with its competitors, and its successor, IE 7. This discussion is necessary because the majority of Internet users are using Internet Explorer for Windows in one form or another. Bugs are an unfortunate fact of designing web pages. In a perfect world, no hacks or workarounds would be necessary. Unfortunately, this isn’t a perfect world. A couple of years ago, designers were grumbling about having to support Netscape Navigator 4. Today, use of Netscape Navigator 4 is virtually nonexistent, and the browser designers are complaining about IE 6. In the upcoming sections, you learn about a few of the most important bugs you may encounter when rendering a web page for IE 6, and I show you how to smash them. Although other browsers, such as Mozilla, Opera, and Safari, have their share of bugs, the biggest problem today is IE 6 for Windows. The majority of the bug fixes presented in this chapter involve floating ele- ments in IE 6. I also present a unique package that corrects some of IE 6’s rendering bugs and implements CSS functionality in Internet Explorer 5.5, and 6. This solution is called Dean Edwards’s “IE7,” and it is the focus of the next section. bc_096970 ch16.qxp 4/17/07 2:48 PM Page 1 Approaching CSS Bugs in IE There are two approaches to fixing CSS problems with IE 6. The first approach you’ve already seen in previous chapters, including Chapters 7, 8, and 11. The approach that you saw involved direct workarounds and fixes for specific problems on a case-by-case basis. Problems such as IE 6’s nonsupport of min-width and max-width, or min-height and max-height properties, for example, can be solved by using a conditional comment style sheet and a tiny bit of JavaScript that’s included via Microsoft’s proprietary, dynamic CSS expressions feature. One other approach exists, and is presented here as Dean Edwards’s “IE7” JavaScript. This solution is subtle and true to CSS standards. By using JavaScript, it’s possible for a developer to write a small pro- gram that executes within a web document, which can look at your style sheets and dynamically apply fixes for the CSS properties and features the browser doesn’t understand. The advantages of this approach are: ❑ No nonstandard CSS workarounds are required in the style sheets; you simply use all standard CSS in the style sheet. ❑ End users don’t have to upgrade their browsers or install anything. ❑ Developers don’t require any knowledge of JavaScript. However, this solution isn’t without problems. The following are the cons of this approach: ❑ Pages take longer to load; the load time increases with the size and complexity of the style sheet. ❑ Depending on the features you’re using, sometimes you can see portions of the page snap into place. ❑ The script contains fixes for every CSS feature targeted by the developer, thus every fix is applied every time the page is loaded. ❑ You’re at the mercy of the developer to fix bugs in the JavaScript. ❑ You’ll want to check Dean’s website at http://dean.edwards.name/IE7/caveats for addi- tional things to consider with this script. Some feel that promoting and using standard CSS is more important than performance, and accept those trade-offs. Others set aside the idealism of promoting the CSS standards over performance, and insist on the fastest, best performing documents. If you fall in this second crowd, then you’re going to want to stick with the direct workarounds that I’ve presented throughout this book. If you fall in the first crowd, or are simply curious as to how this works, read on. 2 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 2 How Dean Edwards’s “IE7” Came to Be Dean Edwards’s “IE7” JavaScript isn’t version 7 of Microsoft’s Internet Explorer browser. In 2003, Microsoft discontinued the stand-alone IE browser and announced the next version of IE would be included exclusively in Windows Vista, then codenamed Longhorn, and not anticipated for release until 2007 or possibly as late as 2008. (As I write this, Windows Vista has, in fact, been released.) In 2004, after the first edition of this book was published, Microsoft recanted its plan and announced the next version of IE, IE 7, would be made for Windows XP (all variants, SP2 and later), Windows Server 2003, and Windows Vista. Before Microsoft’s IE 7 actually came about, developers were chomping at the bit for an improved IE, and since it didn’t look like there was going to be a new IE for a while, one developer decided to take on the challenge of reconciling broken and nonexistent CSS functionality in IE 6. Who was this brave, enterprising soul? None other than London, UK native, Dean Edwards. His answer to this quandary, which he called “IE7” because it contains functionality and features he hoped would be in the real IE 7, is an open source project focused on fixing and implementing portions of CSS 2, CSS 3, and even some HTML 4. Commenting on the lack of CSS 2 support in IE 6 (see his website at http://dean .edwards.name/ie7), Dean contends, “We need a level playing field.” The coming sections explain what “IE7” is and how to deploy this solution in a website. What Dean Edwards’s “IE7” Is Dead Edwards’s “IE7” is a client-side solution written completely in JavaScript, a programming lan- guage used to create scripts (or programs) that can be included directly in a web document. Because “IE7” is developed using JavaScript, the end user accessing a website need not download, update, or install anything. This makes “IE7” an attractive solution. Consequently, because of its ambitious goals and impressive functionality, many have hailed “IE7” as the Holy Grail of website design. If you’d like to learn more about JavaScript, you may be interested in Beginning JavaScript, Second Edition, by Paul Wilton, also available from Wrox (ISBN: 0-7645-5587-1). Getting the Source Code for Dean Edwards’s “IE7” You can find the “IE7” homepage at http://dean.edwards.name/ie7, and you can download “IE7” from Source Forge at https://sourceforge.net/projects/ie7/. “IE7” is available under a Creative Commons license, meaning that the source may be modified or redistributed, provided that the original author is always credited. For more information on the Creative Commons license, visit http:// creativecommons.org/licenses/by/2.0/. 3 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 3 CSS Features Provided by Dean Edwards’s “IE7” The goal of Dean Edwards’s “IE7” is to provide working CSS 2 and some CSS 3 selector syntax, as well as support for a small subset of properties. It focuses on providing the same features offered by Firefox, Opera, and Safari, all of which have far more advanced CSS support than IE 6. At the time of this writ- ing, the majority of web surfers use IE 6, but it has slowly become a thorn in the sides of developers who want to take advantage of the features offered in CSS 2 and the emerging CSS 3 standards. Here is a brief summary of some of the features provided by Dean Edwards’s “IE7”: ❑ Attribute, direct child, and adjacent sibling selectors ❑ Support for pseudo-classes: :active, :hover, :focus, :first-child, :last-child, :root, and :empty ❑ Support for pseudo-elements: :before and :after as well as the content property ❑ Consistent box model rendering between IE 5, 5.5, and 6, per the W3C specifications ❑ Support for the min-width, max-width, and min-height properties ❑ Support for the background-attachment: fixed; declaration ❑ Support for the position: fixed; declaration ❑ PNG transparency Dean Edwards doesn’t have immediate plans to integrate additional functionality, having stated that “It’s important that “IE7” not be better than standard browsers.” However, he has expressed a willing- ness to accept “bribes” for the implementation of additional features and a willingness to accept techni- cal assistance to develop this solution. By “bribes” (his choice of words) he, of course, means, a modest donation to his efforts. Because “IE7” is a continuously evolving solution, it will probably support many more features by the time you read this. Dean’s plan for the future of his “IE7” include updating it to match the features of the real IE 7 browser from Microsoft, which may include removing some features and adding others. So as you utilize this project, you should keep this in mind. In an upcoming Try It Out, I explain how to find out exactly what functionality is provided by “IE7.” At the time of this writing, “IE7” is considered alpha software. Alpha software is in an early stage of development. Generally, software deemed to be in an alpha state has been tested only by its developer and may be subject to bugs and changes in its design. Beta software is a step above alpha; it has been tested by a larger group, but may still contain bugs in its functionality. Its design, however, is typically rooted and stable. Stable software is what you find most in use. It has been tested extensively; it may have a few bugs, but it does what is expected by its developer in the majority of scenarios. The beauty of “IE7” is that no special software is required for the user to take advantage of its features. All the necessary code is included directly in the web page. The end user needs no plug-ins or compli- cated downloads. Furthermore, after it is downloaded, the “IE7” files reside in the browser’s cache, so 4 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 4 other than the initial download of the required files, “IE7” does not affect download times. In order to use IE 7, however, you’ll need to install an HTTP server, or access your pages from an existing HTTP server. Installing an HTTP server is discussed in the next section. Installing an HTTP Server In Chapter 1, you saw an overview of how web pages are accessed and stored. This is accomplished using something called an HTTP server. An HTTP server is software used to deliver a web page from the server computer, for example, www.example.com, to the browser of the client computer. In order to use “IE7,” you must have a web server installed on your computer to serve the files. This has to do with how the files of the “IE7” package are structured, and makes implementation of this solution much more painless. A myriad of different HTTP servers are available; I’ll talk you through setting up the following HTTP server software: ❑ Apache for Windows (any version) ❑ Apache for Mac OS X ❑ Microsoft IIS on Windows XP Pro, Windows Vista, or Windows Server 2003 (IIS is only available on non-home or basic versions of Windows, that is, the pricier Windows products) Installing Apache for Windows The first HTTP server I walk you through is Apache for Windows, which can be installed on any version of Windows. Apache is a popular, open source HTTP server used to serve up millions of websites for both individuals and businesses large and small. This example provides instructions for how to down- load and install the Apache HTTP server for a Windows operating system. Try It Out Installing the Apache HTTP Server in Windows Example 16-1. To install the Apache web server, follow these steps: 1. Download Apache 2 from http://httpd.apache.org. More than one download package is available; select the Win32 MSI Installer for Apache 2. 2. After the package is downloaded, double-click the file to initiate the installation wizard. 3. Read and accept the terms of the Apache license agreement, and then click Next. 4. If you desire, read the next pane on installing Apache for Windows, and then click Next. 5. The next screen (see Figure 16-1) is very important because it determines what you will type to access your web pages through a browser. Under Network Domain, type localhost, and under Server Name, type localhost again. Under Administrator’s Email Address, you may include either your real e-mail address or simply type admin@localhost. After you have typed this information, click Next. 5 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 5 Figure 16-1 6. In the next screen, select the Typical installation option (see Figure 16-2), and then click Next. Figure 16-2 7. On the next screen, select the directory where Apache should be installed, or use the default path (see Figure 16-3). After selecting the directory, click Next. 6 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 6 Figure 16-3 8. Finally, click the Install button to begin installing the Apache server. 9. After finishing the installation, Apache should be good to go. To see if the installation of Apache was successful, open your browser and type http://localhost in the Address bar of your favorite browser. If you see output like that shown in Figure 16-4, the installation of Apache was successful! Figure 16-4 How It Works Apache is an HTTP server used to serve web pages. Installing an HTTP server, such as Apache, is the first step toward hosting your own website, although for the purposes of this discussion you’re going to use it to test web pages on your own computer and observe the functionality offered by the IE 7 pack- age. After you’ve installed Apache, you’ll find your web documents at the location shown in Figure 16-5. The path C:\Program Files\Apache Software Foundation\Apache2.2\htdocs, of course, will depend on where you installed Apache. The file index.html is the document displayed in Figure 16-4. 7 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 7 Figure 16-5 The directory where your publicly accessible web files are stored is known as the root www directory, or document root. Caution: If your computer does not have a firewall (software that prevents outside access to your computer), the documents appearing in the root www directory may be available to the world at large. Do not place documents in the root www directory that you do not want the whole world to have access to. This applies to all of the HTTP server software discussed in this chapter. Conversely, if you want the docu- ments to be accessible to the world at large, additional configuration may be required, but is outside the scope of this book. 8 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 8 You can learn more about Apache in Beginning PHP5, Apache, MySQL Web Development, by Elizabeth Naramore, et al. (Wrox, 2005). Apache for Mac OS X Apache comes bundled with every copy of Mac OS X; all you need to do is turn it on. To turn on Apache for Mac OS X, go to System Preferences, click Sharing, and then check the Personal Web Sharing box, which is shown in Figure 16-6. Figure 16-6 Once Apache is activated, you just follow the instructions at the bottom of the dialog to access your com- puter’s website. Mine is shown as http://192.168.1.100/~richy/; yours will differ depending on your computer’s IP address, and your Mac OS X username. Once you load the URL, you should see a page like the one shown in Figure 16-7. The documents are stored in the “Sites” folder, which is found in your user folder. For example, mine is located at /Users/richy/Sites. 9 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 9 Figure 16-7 IIS in Windows IIS stands for Internet Information Services and is Microsoft’s HTTP server software. Unfortunately, IIS is included only in Professional versions of Windows XP and Windows Vista, and of course is included in Windows Server 2003. That means IIS is not available for Windows XP Home, or Home Basic, or Home Premium versions of Windows Vista. To install IIS, go to Start➪Control Panel, and then click Add or Remove Programs. Once the Add or Remove Programs dialog opens, click the Add/Remove Windows Components button on the left side of the dialog; you should see something like what appears in Figure 16-8. 10 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 10 Figure 16-8 With your Windows install CD-ROM inserted in your CD- or DVD-ROM drive, click Next to begin installing IIS. Once IIS is installed, your web documents are stored at C:\Inetpub\wwwroot, so if you create the document index.html at C:\Inetpub\wwwroot\index.html, you can type http:// localhost/index.html to access that file. You can simply delete the other files in that directory, if you choose; they are not essential to running IIS. Installing Dean Edwards’s “IE7” After you have installed an HTTP server, the following Try It Out walks you through the process of extracting the files contained in the “IE7” zip archive. It also instructs you on how to install those files to the root directory of your HTTP server (or, in other words, the directory from which the documents of your website are served using the HTTP server you just installed). Try It Out Installing Dean Edwards’s “IE7” Example 16-2. To extract the files of “IE7,” follow these steps: 1. Download “IE7” from https://sourceforge.net/project/showfiles.php?group _id=109983. 11 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 11 2. For Windows XP, open the zip archive using Windows Explorer. You do this by double-clicking the archive file. If your operating system does not natively support zip archive extraction, you may obtain third-party software from www.download.com by supplying the search term zip to the download.com search box in conjunction with your operating system (use the advanced search option to select a specific operating system). Several third-party software solutions are available free of charge. On Mac OS X, you can simply double-click the zip archive to unzip it; the unzipped folder is created in the same folder the zip archive appears in. If you’re using Mac OS X, skip to step 9. 3. In Windows XP, click the Extract All Files link in the left pane of the window under Folder Tasks, as shown in Figure 16-9. Figure 16-9 4. This opens the native Windows XP zip archive extraction wizard. If you installed IIS, skip to step 7. 5. Select the directory to which you wish to save the extracted files. For these files to be served by Apache on Windows through the http://localhost URL, they must be stored in the root www directory. As you saw earlier in this chapter, by default, Apache creates an htdocs direc- tory for this purpose. Therefore, the files must be extracted to C:\Program Files\Apache Software Foundation\Apache2.2\htdocs. Update the file path accordingly in the Extraction Wizard dialog if you chose to install Apache to a different location. This window is shown in Figure 16-10. 6. Rename the “IE7” directory located at C:\Program Files\Apache Software Foundation\ Apache2.2\htdocs to “ie7” (all lowercase letters), and skip ahead to step 10. 12 Chapter 16: Using Dean Edwards’s “IE7” bc_096970 ch16.qxp 4/17/07 2:48 PM Page 12 Figure 16-10 7. If you installed IIS, the “IE7” archive must be extracted to the IIS root www directory so that the “IE7” files can be accessed from the http://localhost URL. To do this, enter the path C:\Inetpub\wwwroot beneath the input box labeled “Files will be extracted t