Designing and developing a site for every single browser available is a monumental task. Hell even getting a site to work between the top four or five browsers can be a living nightmare. I am working on some new design ideas for a site and decided to put it through its paces by testing in IE7, IE8, IE8 Compat View, FireFox 3.x, Chrome and the latest version of Safari. While working on the site’s template I noticed that each browser had its own set of quirks. In fact I found that IE8 seemed to be one of the more standard browsers in that if a problem showed up elsewhere, it usually showed up in IE8.

There are a few things I learned during this process:

1. Before you get to the fancy stuff, layout your divs with some nasty backgrounds (that are distinct!) so you know exactly where and how each one is being rendered. You can also use web developer extensions for the browsers, but I find these do not persist across page posts. For example the web developer plugin for FireFox will reset your outlining settings when you refresh the page. Having to reset this every time you change something becomes a pain. By coloring every div, every element, you get a clear picture of what is going on.
2. li:hover, as seen in the navigation here, is fixed in IE8 RTW (Release To Web)! But not in compatibility view. This is strange however since IE7 does li:hover elements just dandy.
3. Margins can suck it. Apparently when you have a div (div A) within a div (div B) and set a top margin on div A, it affects the top margin of div B. This seems retarded to me, but if you set a top and bottom padding of 1 pixel on div B, all is swell again (except in IE7). If you remove the margin and use a padding in div A, you get the desire results.
4. Extra Spaces suck too. The hardest part of developing for multiple browsers is hunting down the odd spaces that show up where you don’t think they will pop up. It could be due to how you have your paddings and margins setup on touching divs, but trust me when I say that these spaces will be the end of every web designer.
5. Standards mean nothing unless every browser follows them strictly! Why does IE8 have a compatibility view? Screw it, and screw every other browser’s quirks too. If a standards body is created and designs a set of rules for the browsers’ rendering system to follow, they should make sure they follow them exactly. That is why they are called standards right? They aren’t “guidelines you should follow to make developers’ lives easier but don’t really have to follow them because the developer doesn’t really care that much!”

A lot of buzz going around about the new release of Safari which I must say seems plenty fast. I think this is more due to the fact that it doesn’t wait to start rendering stuff. Loading facebook is fast, but loading images on facebook is still painfully slow.

Anyways, I enjoy using Chrome because it is a painless and lightweight alternative to IE, although it does crash every now and then just like every other browser. Where the two new browsers fail is in support for new Windows 7 features like the title bar drag. While you can drag a Safari browser around by the tabs (which is a dumb idea) if you drag to the top and maximize, you can’t drag out of the maximized size. The same goes for Chrome, however I must give Chrome some props because it doesn’t use the entire top bar for two tabs!

What would be nice if Safari (and IE!) adopted Chrome’s look but implemented title bar drag by allowing users to drag from the area to the left and right of the tabs. Or if they abandoned the approach altogether and came back to a uniform look and feel to software.

Oh and thanks Google and Apple for not even using Aero!