If you’re wondering why the extensions get changed to .zip, it’s because the new Office 2007 formats are nothing more than a series of XML documents zipped up with their own special file extensions. Java .jar files and Mozilla Firefox .xpi files do mostly the same thing, so this isn’t a new concept, but it does seem to introduce a bit of a problem for Internet Explorer users.

There seem to be a number of “solutions” out there, but many of them involve telling the end user to change a setting in their browser or something like that — definitely not the best solution. Another option is to simply rename the affected file(s) to the appropriate extension(s) and open them up in Office as usual. Although this works, it’s still not a great solution since most users won’t know to do that.

The best solution I found was on a forum, where a user suggested setting the MIME types manually on the server. This is obviously a better solution, since end users get the expected behavior and are able to download files with the proper extension. For Apache servers, simply add the following to your config file or create an .htaccess file in the root directory of your website:

AddType application/vnd.ms-word.document.macroEnabled.12 .docm
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.document docx
AddType application/vnd.openxmlformats-officedocument.wordprocessingml.template dotx
AddType application/vnd.ms-powerpoint.template.macroEnabled.12 potm
AddType application/vnd.openxmlformats-officedocument.presentationml.template potx
AddType application/vnd.ms-powerpoint.addin.macroEnabled.12 ppam
AddType application/vnd.ms-powerpoint.slideshow.macroEnabled.12 ppsm
AddType application/vnd.openxmlformats-officedocument.presentationml.slideshow ppsx
AddType application/vnd.ms-powerpoint.presentation.macroEnabled.12 pptm
AddType application/vnd.openxmlformats-officedocument.presentationml.presentation pptx
AddType application/vnd.ms-excel.addin.macroEnabled.12 xlam
AddType application/vnd.ms-excel.sheet.binary.macroEnabled.12 xlsb
AddType application/vnd.ms-excel.sheet.macroEnabled.12 xlsm
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.sheet xlsx
AddType application/vnd.ms-excel.template.macroEnabled.12 xltm
AddType application/vnd.openxmlformats-officedocument.spreadsheetml.template xltx

Note that, if you’re updating your main config file, you’ll have to restart Apache before the changes will take affect. With .htaccess files you shouldn’t need to restart the server.

Now your users will be able to download Office 2007 files from your server without any problems.  If you’ve discovered another method for solving this problem, please share it in the comments!

That said, I stumbled across a very interesting framework today that may help bridge the gap between the present and the future — when HTML5 and CSS3 is supported by all major browsers.  52Framework boasts features such as rounded corners, text-shadow, box-shadow, HTML5 markup, a grid system, and a built-in CSS reset.  Best of all, it’s compatible with all major browsers, including the infamous IE6.  You can see a working demo of an HTML5 page using with 52Framework on their website or download the latest release from their homepage.  If you’re just curious to see what it’s all about, you can take a peak at what’s inside the box.

Although still in beta, 52Framework looks like a promising alternative for anyone looking to take advantage of the upcoming HTML5 + CSS3 specifications.  As nice as it is, however, I don’t think it’s something I would rely on for heavy production use…at least not without some very thorough testing on a lot of different browsers.

In order to continue to improve our products and deliver more sophisticated features and performance, we are harnessing some of the latest improvements in web browser technology.  This includes faster JavaScript processing and new standards like HTML5.  As a result, over the course of 2010, we will be phasing out support for Microsoft Internet Explorer 6.0 as well as other older browsers that are not supported by their own manufacturers.

We plan to begin phasing out support of these older browsers on the Google Docs suite and the Google Sites editor on March 1, 2010.  After that point, certain functionality within these applications may have higher latency and may not work correctly in these older browsers. Later in 2010, we will start to phase out support for these browsers for Google Mail and Google Calendar.

Google Apps will continue to support Internet Explorer 7.0 and above, Firefox 3.0 and above, Google Chrome 4.0 and above, and Safari 3.0 and above.

Starting next week, users on these older browsers will see a message in Google Docs and the Google Sites editor explaining this change and asking them to upgrade their browser.  We will also alert you again closer to March 1 to remind you of this change.

This is obviously great news for designers and developers all over the world, as this kind of encouragement from a company as big as Google will help outmode the infamous browser a lot sooner than expected.  As you may recall, some other popular online services have recently made similar announcements:  YouTube, Orkut, MobileMe, 37 Signals (the makers of BaseCamp) and, of course, our very own Surreal CMS.

*:focus { outline: none; }

This will effectively remove all traces of the outline, allowing you the freedom to style your form controls however you like.

This is a before-and-after screenshot of what a regular text field looks like in Safari, although the same technique applies for Chrome.

After a little searching, I found that you can usually resolve this by assigning table-layout: fixed; to the affected table.

I’m not a huge fan of quick-fixes like this, but in the case of a blatent browser bug there isn’t much you can do without going too far out of your way. I’m sure it will be fixed in an IE8 update soon.

Why can’t I see my homepage when I open a new tab?

It may seem trivial or silly to complain about, but to me the idea of anything but my homepage opening in a new tab is counterintuitive. For example, if you open a brand new browser window what do you expect to see? Your homepage. If you open any browser (before Safari 4, Opera 9.2, and Google Chrome) what do you expect to see? Your homepage.

People generally know what to do when they see their homepage because it’s familiar to them. Most of them know how to use the address bar to go to another website. Many of them know how to choose a bookmark to quickly get to their favorite places on the web. For the majority of people, having their homepage open up in a new tab is simply what they subconsciously expect to happen.

The tragedy here is that this isn’t currently possible in any browser without the use of a plug-in.

It seems as though browser makers each have their own perspective on what should happen when a new tab is opened. Internet Explorer 8, for example, likes to confuse its users with a mostly empty page to stare at. To spice it up a bit, Microsoft decided to add some infrequently used options that users can click on. How many times have you opened up a new tab because you wanted to “Blog with Windows Live” or “Map [something] with Live Search”? How about “Show copied text”?

These are clearly not options that are useful to users, but considering how well they promote Microsoft’s services, I can understand how they got there.

Firefox is my browser of choice for both development and day-to-day browsing, but sadly, it doesn’t do much better than IE when it comes to new tabs. In fact, I think it does even worse in comparison with IE8. It’s a completely blank page.

If I’m not mistaken, Opera was the first to come out with the “smart page” when they introduced Speed-Dial in 9.2. Speed Dial allows users to specify up to nine websites from their bookmarks that will appear in a grid for easy access.

It wasn’t long before other browser makers started trying out their own versions of smart pages. Google Chrome made their smart page more useful by adding a search bar, recent bookmarks, and recently closed tabs. As far as smart pages go, this is probably the best of the bunch for functionality, although the nine websites that are automatically chosen aren’t always relevant to your actual use of them.

Finally, Safari 4 introduced a really slick “Top Sites” smart page that works pretty well. And, as usual with Apple products, it looks great. The only problem is that it’s a little too flashy where it should be more functional. For example, click on the Search History box. The page is instantly replaced by a huge, side-scrolling list of websites. Sure it looks nice at first, but as I search through possible results, I can only see one at a time and it’s very jumpy during transitions. I prefer Firefox’s searchable history over this any day.

So where do we go from here? Will the world stop because we can’t open new tabs and see our homepages? Of course not. It hasn’t yet, and we’ve been dealing with it for years. But why? To me, this seems like a no-brainer that should have made the top of the list for possible “new tab candidates”. At the very least, I’d like to see the browser makers add this in as an option somewhere.

Needless to say, this was a very frustrating proposal for developers worldwide. At the same time, Microsoft’s obligation to not “break” the web was very understandable. It was a catch 22 for the company, but the issue had to be tended to promptly. After much discussion and some encouragement from the community, Microsoft officially reversed their decision to handle version targeting this way.

Now that IE8 has been officially released, one problem still remains for many legacy sites. What if IE8 “breaks” your website? The short-term solution is actually very simple:

Windows Internet Explorer 8 introduces document compatibility modes that allow Web developers to tell the browser to render their pages in the same way as older versions would, thereby allowing the developer to choose when to update.

In short, add this tag inside the <head> of each of your webpages and call it a day:

<meta http-equiv="X-UA-Compatible" content="quot;IE=EmulateIE7" />

Wait! Don’t actually call it a day and forget about it! Although I’m sure a lot of folks will do just that, the fact is that you really should treat this as the temporary fix that it is and make an honest effort to get those legacy websites and applications up to date. The reality is, however, that many developers will be confronted with compatibility issues as IE8 gets pushed out to millions of users via Windows Automatic Update. Of course, many won’t have the time or resources it takes to redevelop or modify all those old sites so, in a pinch, you can at least get by.

<img src="/path/to/image/filename.jpg" alt="Sample Image" width="" height="" />

As it turns out, if you have the width and height attributes set to an empty string, IE seems to interpret the width and height as zero, which makes the image not appear. All other browsers, of course, seem to discard the empty attributes.

The solution? Simply remove the empty attributes or plug in the appropriate values.

To make sure the image wasn’t corrupt, I saved it again using PhotoShop. No luck. Even after saving the image as a GIF instead of a JPEG, the white noise persisted in IE.

Luckily, some research resulted in finding Alex Judd’s post, which provided a relatively simple solution to the problem.

To summarize, the white noise occurs in both IE6 and IE7 on some (but not all) images when they fade in or out. This is especially true when you’re using a JavaScript library such as jQuery or script.aculo.us.

Evidently, IE mistakes some of the true-black pixels for transparent pixels, which causes the “white” noise (which may not necessarily be white, depending on the underlying background). One work around, as Alex points out, is to adjust the levels of the image in Photoshop very slightly—just enough to eliminate the true-black pixels.

To do this, open the image up in PhotoShop and perform the following steps:

1. Select Image, Adjustments, Levels
2. Move the Output Levels slider a few pixels to the right (or type in a small number, like 5)
3. Save the image

In most cases, there won’t be a noticeable difference in color. Alas, this work around does solve the display problem in IE, but not without tampering with the original image. We’ll have to keep our fingers crossed in that IE8 finally addresses this issue.

As usual, nothing in Internet Explorer can be rudimentary. The first thing I noticed was that the toolbar wasn’t showing. It wasn’t located intuitively under View > Toolbars, but rather View > Explorer Bar. Once I had it showing, all of the options were grayed out/disabled. Urgh…less than useful. Here’s how I got everything to work.

1. Download the IE Developer Toolbar.
2. Run the MSI and proceed through the install as normal.
3. When you restart IE, the developer toolbar will most likely not be showing. To show the toolbar, press ALT + V (to access the hidden View menu), then select Explorer Bar > IE Developer Toolbar.
4. If all of the options are grayed out, go to Tools > Internet Options > Advanced and make sure Enable Third-party Browser Extensions is checked.
5. Then, go to Tools > Internet Options > Programs > Manage Add-ons and look for IE Developer Toolbar and IE Developer Toolbar BHO. Make sure both are enabled.
6. Restart IE and enjoy your new toy :)