Archive for December, 2006

Dec172006Running Internet Explorer 6 and 7 on Windows

While Internet Explorer 6 is (for the time being) still the most popular Web browser, IE 7 is rapidly becoming more common. Unfortunately, the two browsers can be very different in how they display Web pages; many of the display bugs found in IE 6 and earlier have been fixed in IE 7, so to really test your Web designs you need to preview your pages in both browsers. Because Windows doesn’t normally let you run multiple versions of IE side-by-side, you’ll need a workaround to do this kind of testing:

First, you can just get two PCs–one for IE 6 and one for IE 7. Alternatively, you can run a “Virtual Machine” on your computer (this only applies to Windows users; Mac users with Intel-based Macs have another solution.) A virtual machine lets you run a second (slow) copy of Windows on your computer. The virtual machine can be used to run IE 6 for testing purposes (you’ll use your regular, non “virtual”, machine for designing and developing your sites.) Fortunately, Microsoft supplies all of the pieces you need, for free: both Virtual PC 2004 and a “virtual hard disk” that includes a copy of IE 6 and a stripped-down version of Windows XP.

The instructions for setting up a virtual machine with IE 6 are at the end of this post, but I think I should mention a few of the drawbacks of this set up:

  • It assumes you install IE 7 on your computer first. In other words your primary browser will be IE 7 and you’ll launch the virtual machine and IE 6 just to test your designs. (It’s possible to hold onto your version of IE 6 and install a standalone version of IE 7 as described on this Web site.)
  • It’s RAM hungry. You need a fair amount of RAM (I have 2 GB) for this to work. Without enough RAM, IE 6 in the Virtual Machine tends to crash.
  • It’s time-limited. The Virtual Hard Disk with IE 6 supplied by Microsoft is time-limited. On April 1, 2007 it will stop working (I wonder why they picked April Fool’s Day for this?) The people at MS imply that they’ll provide new updates before then, so you can keep testing this out, but they haven’t promised anything yet.)
  • You have to preview files over the network. Since the virtual machine with IE 6 acts like a separate computer, you don’t have immediate access to all of the files on your computer. The virtual machine only see its own virtual “hard-drive”. There is a slight workaround which I discuss below. Alternatively, you can place your files up on a Web server and test them in IE 6 just by typing in the URL. (If you run a local testing server, you can also access the site via the local IP address of your main computer.)

If you’re still game for installing the virtual machine and IE 6, here’s how.

  1. Download Virtual PC 2004. Virtual PC 2004 is a free program that lets you run different (or additional) versions of Windows on your machine. In this case, it will let you run another version of Windows for testing IE 6. (If you’re running Vista you’ll need Virtual PC 2007 which is currently in BETA but which you can download from: https://connect.microsoft.com/programdetails.aspx?ProgramDetailsID=874)
  2. Unzip Virtual PC, open the Virtual PC 2004 SP1 folder and double-click the setup.exe file. Follow the instructions that appear to install the application.
  3. Visit the Internet Explorer 6 Virtual PC Image download page. On this page you need to “Validate” your copy of Windows, by clicking the “Continue” button. This process may require you to download an ActiveX control, so follow the instructions on the page. I’m not exactly sure how Microsoft “validates” your copy of Windows; they claim they don’t look at any personal information on your computer, but they must send some information back to the mother ship to make sure you’re legit.
  4. Download the Internet Explorer 6 Virtual PC Image. Once your system has been validated you’re taken to the real download page. Click the Download button and choose “Save to desktop.” Go and get some coffee or a good night’s sleep. The file is 495 MB, so if you’re on a slow internet connection, the download could take a while.
  5. Double-click the downloaded file, it’s named IE6AC_VPC.EXE. Running this file just zips it and leaves you with a “Virtual Hard Disk” image (.vhd file) which you can use to install Windows XP and IE 6. The file is named IE6Test.vhd.
  6. Launch Virtual PC (go to the Start menu and select Microsoft Virtual PC). After the program starts you’ll be introduced to a set up wizard. Click the Next button to begin the setup.
  7. Select the Create Virtual Machine option and click Next.
    Create Virtual Machine
  8. Type a Name for the virtual machine (for example, IE 6) and click the NEXT button.
    3name.gif
  9. Choose Windows XP from the Operating sytem menu and click Next.
    4winxp.gif
  10. Click the “Adjusting the RAM” button and set the slider to something larger than the recommended amount. Virtual PC is a memory hungry beast; the more RAM you have the better. I have 2 gigs on my machine and I found that with the recommended setting of 128MB, Internet Explorer 6 crashed continually. With 500 MB of RAM allocated to the virtual machine, IE6 worked OK.
    5ram.gif
  11. Select the “An existing virtual hard drive” button and click Next. This is where the .vhd file you downloaded earlier comes into play.
    6vhd.gif
  12. Click the Browse button and locate the file IE6Test.vhd. Click the Next button.
    7pickvhdlocation.gif
  13. Click the Finish button and you’re all set up.
  14. When you want to run the new virtual machine and access IE 6, just launch Virtual PC, select the virtual machine from the Virtual PC Console and press the start button. This starts a completely separate version of Windows in a separate window. You can run IE 6 from there. The virtual machine acts like a separate computer so it can’t automatically see all of your Web site files on your computer.
    vpcstart.gif
  15. Right click on the shared folder icon (see arrow in image below) in the lower left-corner of the virtual machine window and select “Share Folder.” The Browse for Folder window appears (see next step).
    vmfolder.gif
  16. Select the folder you wish to share, choose a Drive letter, and check the “Share every time” box. You might want to select your entire C: drive on your main computer, or just a folder that holds your Web sites. The “Share every time” option makes sure that the next time you start the virtual machine that it remembers this shared folder.
    vmselectfolder.gif
  17. Open IE 6 in the virtual machine and navigate to a Web file on your computer. You can do this by simply typing the Drive letter followed by a colon in the address bar: for example, Z: This provides a view of that folder’s files, just click through them until you find the Web page you want to test. It’s a good idea to bookmark the home pages for your various sites, so you won’t have to use this lame method to navigate to and test your Web sites in the future.
    vm_ie_view.gif

Dec152006Adobe launches new site for CSS help

If you’re having trouble making your CSS work in different browsers (and who doesn’t!) Adobe.com may have the answers. The just launched CSSAdvisor site is aimed at providing solutions for common CSS problems. It’s an open, community-based project, so you can post your own solutions to CSS dilemmas, and vote on the answers others have presented.

Mac users, don’t use Safari to view the CSSAdvisor site. That browser doesn’t seem to be able to display everything correctly (hopefully something Adobe will fix shortly)–use Firefox instead.

Dec112006Dreamweaver 8: The Missing Manual #5 for 2006

Dreamweaver 8: The Missing Manual was the fifth best selling computer book on Amazon for 2006! Thanks to everyone who bought my book!

Dec72006Firebug: Free, indispensable Web design tool

Trying to figure out exactly why something on a Web page looks the way it does often involves figuring out the complex interaction of multiple CSS styles. The CSS concepts of inheritance and the “cascade” (which I discuss in chapters 4 and 5 of CSS: The Missing Manual) means that an element on a page might be formatted by more than one style. For example, a particular h1 tag might inherit a font face and font size that was defined for the body tag, a margin defined for the h1 tag, and a font color defined in a class style that’s applied to the tag. And that’s just a simple example.

Fortunately for us Web designers, there’s a free Firefox extension that makes it easy to see how styles affect a particular tag on the page. Firebug (http://www.getfirebug.com/) provides several helpful tools for analyzing your Web pages. One of the most useful is the style panel which lets you see which styles apply to a particular page element–it lists inherited styles as well as styles that apply directly to the element. It also crosses out any CSS properties that don’t apply to the element because they’ve been overruled by more specific styles.

Another useful tool is the Layout tab which provides information concerning the width, height, margins, padding, border and placement of an element on the page. This is a great way to answer simple questions like: how wide is this sidebar anyway (as you can read in Chapter 7 of CSS: The Missing Manual, this kind of question isn’t always easy to answer.) Although you can find similar features in Dreamweaver, I haven’t seen any free tools that offer this much helpful diagnostic information for Web designers.

And believe it or not, these are just a few of the things this incredible extension can do (it also includes a powerful JavaScript debugger for you programmers out there.) It only works with Firefox (there’s another solution for IE and other browsers mentioned on the Firebug Website). Download it today…it could save you hours of hair-pulling frustration.

Categories

Archives

Buy them today!

Dreamweaver 8: The Missing ManualCSS: The Missing Manual