Category Archives: Browsers

Firefox Proposes Releasing Every Six Weeks

Read the proposal here.

I predicted this here.

This is obviously a response to Google Chrome releasing a new version every six weeks. Chrome is eating Firefox’s lunch. Maybe not in overall marketshare, but Chrome is definitely faster. In the browser market, faster is better. People are noticing this.

Also, developers are shifting to Chrome, and I would argue that developers were a big force in pushing adoption of Firefox. Chrome is helping itself in this area by having native dev tools and focusing on improving those tools.

Firefox 4 was in development for over a year with the release date slipping multiple times. Firefox could simply not continue on it’s current path and stay relevant in the current market.

Firefox 4 is set to be released on March 22, 2011. Versions 5, 6 and 7 are also currently planned for release in 2011.

Getting Overflow Hidden to Work in IE

This is an easy fix, but I thought it was worth a post anyway, in case someone comes across it.

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.

Firefox 2 Does Not Support inline-block

Those familiar with CSS 2.1 may be familiar with the CSS property display: inline-block. This property allows an object to have the properties of both an inline object and a block object. What this means is that the object can be displayed inline but have height and width qualities of a block object.

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.

Safari Web Inspector for Windows

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.

Browser Testing for Internet Explorer

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?

Internet Explorer 7: The First Year

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.

Using Web Inspector in Safari 3

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.

Safari 3 for Tiger is Now 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!