In case you didn’t know, there is a beta version of the Mac browser Safari available on Windows as of last year. I’m not sure why it is still in beta status as it has been out for awhile, and Safari 3 for Mac is now part of Tiger and Leopard and not in beta.

Anyway, if you are wanting to debug your HTML and CSS in Safari, you should have Web Inspector. Web Inspector is a debugging tool for Safari similar to the Firefox plugin, Firebug. Well, now that I am on a Windows machine at work, I installed Safari for Windows. So, I wondered if Web Inspector was available for Windows as well, and it is. Check out the directions for enabling it here. Basically, you edit your WebKitPreferences.plist file and add this line of code.

<key>WebKitDeveloperExtras</key>
<true/>

Restart Safari, and that’s it. To use Web Inspector, open any web page in Safari, and right click on any html element you wish to inspect. You should see an option for Inspect Element. Click that option, and Web Inspector will open on that element. That’s it.

As a web designer, you should make sure that you test your designs across all major browsers. Here is the list of browsers you should be testing on, if you aren’t already, in no particular order.

1. Internet Explorer 7
2. Internet Explorer 6
3. Firefox
4. Safari
5. Opera

Of those 5, I find that IE6 is the one that gives me the most trouble. I recently changed jobs which resulted in me having to come up with different ways to test in IE 6 and 7. At my previous job and in my house, I test different versions of IE on different computers. In my new job, I don’t have that luxury anymore, so I had to find a different way to test on one machine.

One option that was recommended to me was Multiple IEs. This is a program to use if you have IE 7 installed and want to install multiple versions of IE below version 7 that you can have running at the same time. I found that this didn’t work well enough for me. The reason is that running IE 6 through Multiple IEs is not stable. Also, you can’t use the IE Developer Toolbar with IE6 in Multiple IEs. Since IE 6 is the main browser I debug in besides Firefox, I found that I had to find a way to have IE 6 running as the main IE version on that machine.

Another solution that was recommended to me was Virtual PC. Virtual PC for Windows allows you to have another versions of Windows running on your PC. This way you can have different versions of IE running at the same time. Plus, Virtual PC is now a free download from Microsoft.

So I decided to uninstall IE 7 and reinstall IE 6. This allowed me to have a stable version on IE 6 running with the IE Developer Toolbar. I then installed Virtual PC. Microsoft has also made a Virtual PC hard disk image with an evaluation version of Windows XP with IE6 or 7 available as a free download which you will need to run IE on Virtual PC. Keep in mind, this version has an expiration date of April 1, 2008.

Once I had that installed I was able to run Virtual PC with XP and IE 7 on Windows while running IE 6 at the same time. You can also install the IE Developer Toolbar in Virtual PC. In fact, Microsoft includes the developer toolbar with this version of the hard disk image. I found this to be the best solution so far for having multiple versions of IE running on the same machine. Not surprisingly, this is the same method that Microsoft itself endorses. Which method do you prefer?

Microsoft updated their IE blog last Friday, with a post on the one year anniversary of IE7. Most interesting to me, was this piece.

There are over 300 million users are experiencing the web with IE7. This makes IE7 the second most popular browser after IE6. IE7 is already #1 in the US and UK, and we expect IE7 to surpass IE6 worldwide shortly.

Let’s hope that comes true. If you are an IE user and haven’t upgraded to IE7 yet, here are a few reasons why you should.

1. Improved security
2. Fraud protection
3. Fewer bugs

Of course if you care about web design standards, you should upgrade to IE7 for it’s improved support for CSS. The problem with this is that IE7 only fixed known bugs and added support for CSS properties that were already being used in current browsers. IE7 did nothing to advance support for CSS, and it is still behind IE6 in its user base.

What web designers want to know, Microsoft, is where is IE8 and how do you plan on using it to advance support for CSS and web standards. If you need more proof of this, just read the comments on your own blog.

I am really digging Safari 3. One of the cool features in Safari 3 is web inspector. Web inspector is a tool mainly for web developers to use in debugging web pages. It is basically Firebug for Safari.

Web inspector is not new. It has been available for a while in Safari 2. But it has been redesigned for Safari 3. Here is a screenshot of it.

The tricky part is that you need to enable it in order to use it. First, if you are using Tiger, you need to get 10.4.11 in order to make sure you have Safari 3. If you are using Leopard, you already have Safari 3. Once you have it you need to be able to use command line in Terminal. To enable Web inspector, open up Terminal and type the followwing command.

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Now you have it enabled. To use it, restart Safari and right click on any element on a web page and select Inspect Element. This will open up Web inspector.

I won’t take the time here to give a thorough review of everything it does, but play around with it and test it out. It lets you view the underlying code of your page along with the CSS applied to each element in the correct cascade order of the properties. It also gives you an error view and a network view. The network view shows you how each item on the page downloaded and how long it took. There is also an element inspector that lets you view each element that was downloaded that can be very useful for developers.

I also have to comment on how fast Safari 3 is. I noticed while using it that it is much faster than Firefox. It was enough to get me to switch to Safari from Firefox while using a web application. It’s that much faster.

So there you go. If you aren’t using Safari yet, I just gave you two good reasons to check it out.

You may or may not know that Apple released Safari 3 with Leopard. If you are like me, you were wondering when it was coming out for non-Leopard Mac-users, or if they were going to release it at all. Well, today is the day. Safari 3 is now available on Tiger. Read about it here.

To get Safari, you need to get Mac OS 10.4.11 which is out today. You can either get it through automatic upgrades or install it manually. It requires a restart if you were wondering. It appears to be worth it. I haven’t installed it yet, but from what I hear, it is much improved over the previous versions.

What are the improvements? Surfin’ Safari has a list of ten new things in Safari 3. The biggest performance improvements in my opinion are the enhanced rich text editing, faster javascript and DOM and faster page loading. Chris in my office installed Safari 3  already and noticed those 3 things right away. Hopefully, enhanced rich text editing means that I can use Wordpress, which uses TinyMCE for editing, in Safari now. I also think the developer tools will be useful. I can’t wait to try it out!

Okay, I bought into the hype of the PNG format. I admit that on the surface, PNG is a superior format for the web versus JPEG and GIF.

There’s one problem. If you use PNG graphics with JPEG or GIF or CSS colors, the colors do not match up. This means if you use a PNG over a JPEG or colored backgound that is the same color as the PNG, the color will not look the same. This is a problem for me. So much so that I have stopped using PNGs in my designs. They only way I can use them is if the color matching is not a problem.

Also, PNG transparency is not supported in IE6. This is not such a problem because there is a workaround. But it is annoying and IE6 is still the most used browser in the world.

I found out that the reason PNG graphics do not mix with other formats is due to gamma correction. One solution is to remove the gamma information. GammaSlamma is a program for the Mac OS that does this. However, this does not work in all browsers.

I was happy to use PNGs until I figured out the problems with it. Until the technology catches up, I am still stuck using outdated graphic formats whether I want to or not.

I have been looking for a source for stats on browser marketshare, and what do you know, I’ve found it. There is a site called Market Share that apparently publishes this information on a monthly basis. So now I have some concrete information to go on. In fact you can see September 2007 browser stats here. Here is a snippet of info.

Microsoft Internet Explorer 6.0 - 42.75%
Microsoft Internet Explorer 7.0 - 34.60%
Firefox 2.0 - 13.57%
Safari 41 - 3.91%

As you can see, IE7 is still second to IE6 with Firefox coming in far behind in third. So if you ever doubt that you need to check your work in IE6, it is still the most used browser out there.

Update - 10/16/07: Microsoft is issuing an automatic update today that will install IE 7. We should be able to see the effects of this if we watch the browser stats in the next few months.

I keep a copy of IE6 installed for testing purposes. When I fired up IE6 this morning, it took me to this page for IE7, basically prompting me to upgrade to IE7. It seems that Microsoft is trying harder to get users of IE6 to upgrade to IE7. Ask and you shall receive.

The other day Microsoft had this to say about IE7.

Almost a year ago, we released Internet Explorer 7 for Windows XP. Since then, IE7 is well on its way to becoming the most used browser in the world…

I guess they weren’t satisfied. It appears they decided to take matters into their own hands and give IE7 a little extra push. Good for them.

Update - 10/16/07: Microsoft is issuing an automatic update today that will install IE 7. So hopfeully, you have it set so it does not automatically download and install automatic updates. If you don’t want IE7 on your machine, be sure not to run this update.

If you ever wanted to know how support for CSS improved in IE7, this post is for you. Apparently in August 2006, before IE7 was released, Microsoft posted these details on the IE Blog. The post details all the bugs that were fixed, added support for W3C specifications and features added for CSS 2.1. I always wanted to know this, and this is the first time I have seen it.

They go on to talk about how fixing support for CSS will cause a lot of the hacks that worked before to break in IE7. This page details specifically which workarounds that previously worked in IE6 will not work in IE7.

I believe IE7 has now been out for over a year. I admit I am impressed with Microsoft’s support for CSS in IE7. It is worlds ahead of IE6. However, the adoption rate that I have seen for IE7 over IE6 is still very slow. In addition, how long will it take for Microsoft to release IE8? Five more years? By that time, IE7 will be outdated as IE6 was. Unfortunately, as many inroads as Firefox has made into browser market share, we are still living in a Microsoft world. Maybe by releasing Safari 3 on Windows, Apple will be the one to change that. It is still in beta as of this writing, though.

I don’t usually do link posts, but I thought in this instance it was worth mentioning. I recently discovered 2 posts on Eric Meyer’s blog dealing with reset styles. So what are reset styles and why do we need to use them? For that, read Eric’s post, Reset Reasoning. In this post, Reset Reloaded, Eric lists exactly what his reset styles are so you can use them.

I think that Eric is right in using them. It does seem like reset styles are a better alternative than using a universal selector to remove margins and padding because, as Eric says, the universal selector removes padding and margins from everything. There are some cases where you might not want to do this, such as form elements.

I think I am going to give reset styles a try. How about you?