Setting overflow: hidden on a block element does not work in IE, if width and height are not set. But, it does in other standards aware browsers.

You may come across this situation if you have an element nested inside another element where width and height are set, and the nested element is inheriting the dimensions of the parent element. In that case, there is no need to set width and height usually. Well, in IE, overflow: hidden will not work if no dimensions are specified.

So as you may have already guessed, the fix is pretty simple. Setting a width and height on the element, or even just a width, will cause IE to obey the property.

I’m not sure if IE is doing the correct thing or not, in this case. It does make sense that you would have to specify dimensions, so that the browser will know where to cut it off at. It seems though, that IE is dumb here, as other browsers assume the inherited dimensions. I’ll leave that up to you to decide.

This is a property that can be very useful when applying certain layouts. I was using it on a project recently when I discovered that Firefox 2 lacks support for display: inline-block. This was quite shocking to me because I assumed that Firefox 2 had full support of CSS 2.1. After all, Firefox was the number one Mozilla browser until only recently.

Anyway, in searching for a work around, I discovered that there is a similar Mozilla-specific CSS property that works in the same way, display: -moz-inline-box. All you have to do is add that property to your CSS and you will get the same effect in Firefox 2.

However, I discovered another problem with this in that once you apply display: -moz-inline-box to an object you can no longer use position: absolute on any objects contained within that object. I continued to be amzaed by Firefox 2′s misbehavior.

I finally discovered a solution to this as well, although not ideal. After searching a bit more, I found that if you add an second div inside the object, you can apply position: relative to that, which will then allow you to position objects absolutely within that div. Make sense?

In case you were wondering, the reason it is not ideal is that you are adding an unnecessary div to your code for simply presentational purposes. It is never good to do this, but sometimes the trade off is worth it for full cross browser support, when your layouts are more complex.

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.

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?

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.

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.

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!

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.

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.

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.