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!”