After posting the screenshot of the new Internet Explorer 8 Beta 1 toolbar yesterday, I’ve heard a lot of people complain about how wide (vertically) the toolbars have become. Understandably that was a concern to many users because a browser should devote as many pixels as it could for the content and not itself.

The assumption comes from IE8 having twice as many toolbars as IE7 did, and thus it was perfectly reasonable to come to the conclusion it took up twice as much screen real-estate. Because I had posted a resized image of the interface, it was difficult to prove if that was indeed the case.

In response, I made this original-size side-by-side comparison of the two browser interfaces.

(Left) Internet Explorer 8 Beta 1 toolbar. (Right) Internet Explorer 7 toolbar with links menu enabled.

(Left) Internet Explorer 8 Beta 1 toolbar. (Right) Internet Explorer 7 toolbar without links menu enabled.

As you can see, the IE8 interface is barely any larger than the IE7 interface. The exact different is only 8 pixels. The tabs too are identical at 33px high. By removing the border above the tabs and joining together the two toolbars, it really looks much more spaced out at the cost of barely anything. In my opinion, it’s well worth the difference.

Update: A few people have pointed out because IE7 doesn’t enable the links menu by default, it was not an accurate representation of the IE7 interface. I’ve now added another comparison with the links menu disabled. The difference now becomes 30 pixels. However I should add I don’t think this is fair comparison and I’m also pretty sure the links menu in IE8 can too be disabled.

Speaking of which, I took the quick opportunity to also make a comparison with Firefox 2. Granted it’s a bit of an apple vs. oranges comparison, the difference is a staggering 20 pixels.