I just got done reading Chris Wallace’s advice on browser testing, and I figured I would try to extend the conversation by offering a few tips for building cross-browser websites. So without further delay, here are a few techniques I use to better support multiple browsers.
1. Use a strict doctype—I wanted to start out with the most obvious tip first: use a strict doctype. Having had to do this in the past, it is very difficult (if not impossible) to build a cross-browser site that does not use a strict doctype. This advice has been given over-and-over, so I am not going to beat a dead horse. If you want more information, check out the always helpful ALA Article Fix Your Site with the Right Doctype by the man himself, Jeffrey Zeldman.
2. Clear styles on elements—If you are new to website development, one intricacy you will learn soon enough is that each browser vendor has their own default styles for HTML elements. What does this mean? Well, if you add a heading to a page (for example, <h2>) without any associated styles, it will probably look a bit different between Firefox and Internet Explorer. Don’t worry, this is easily correctable. Yahoo! provides an easy to use reset.css file that will removes the inconsistent default styles. This is done by setting the elements margin and padding to 0 by default. See their code for more information.
3. Use absolute-relative positioning—This was a technique that I first learned from Stopdesign’s article Making the Absolute, Relative. This is a must-read article for any new developer. Because, once you master this technique, you can build almost any complex layout. The key here is that any element that is positioned absolute is always positioned absolute, relative to its first parent that has been either relatively or absolutely positioned (or, to the window if no parent is positioned). Yeah, it sounds confusing. I do not want to make this into a tutorial, so please refer to the Stopdesign articlle for more information.
The key here is that absolute-relative positioning allows you to position elements across browsers with ease. This is my goto technique for position logos, menus, sidebars, and almost anything that is not in the natural flow of the document. For me, this is preferable to floating elements because when given a coordinate (x, y), a set width, and a height (or min-height for dymanic sizes) you get a very consistent behavior across all major browsers.
4. Use an IE6-specific stylesheet—Using an IE6-specific stylesheet is a good way to make up for the short comings of the old (but still relatively popular) browser. What I like about the IE6 stylesheet is that you can pretty much build for newer browsers and support IE6 as an afterthought. This is a good alternative to hacks when you are able to introduce new stylesheets without much difficulty. Also, if you follow the next set of tips, you might be surpised by just how little you will need an IE6 specific stylesheet. You can easily create IE6-specific stylesheets using conditional comments.
5. Apply margin and padding to interior elements rather than the container—This is a very simple solution to working around the box model issues with IE6 (quirks-mode) and IE5.5. Rather than putting margin and padding on containing elements, put the margin and padding on the elements on the inside elements. For example:
div#content{
position: relative;
width: 600px;
margin: 0; padding: 0;
}
div#content p, div#content h1, div#content h2{
margin: 0;
padding: 0 10px 10px 10px;
}
6. Use padding rather than margins—If you have ever run into a problem where everything seems to line up in IE, but there is an odd space displaying between two content blocks in Firefox, then chances are you have run into an issue with collapsible margins. According to Andy Budd, “At it’s core, margin collapsing is very easy to understand. Basically when two vertical margins meet up, instead of adding together, the largest margin takes precedent and the other one “collapses” to nothing”. Personally, I find this behavior counter-intuitive to how I think the browser should render these elements. But, apparently the way Firefox does it, is per the spec. So, my work around is rather than dealing with this issue, to avoid it (when possible) by simply using padding rather than margins to space out elements. That is why in the example for #5, I spaced the elements with padding rather than using margins. Now, there is a time and place for both margin and padding, but when they are interchangeable, stick with padding to avoid issues with collapsible margins.
7. Use a JavaScript library—My final tip is when trying to build a cross-browser website use a JavaScript library to assist you with common tasks. A JavaScript library is a powerful way to abstract a lot of the complexity of supporting multiple browsers. Personally, I do not think it matters which library you choose. I have used Prototype, YUI, and JQuery with success.
8. Understand the limitations of PNGs—The PNG image file format is one of the most significant advancements provided by the newer browsers. I really believe that alpha-transparency will open the door for a lot of real cool designs. I use them on matthewsmith.com, but I choose not to support IE6 here, as well. With that said, PNGs are not well supported by IE6. Yes, there are hacks to get them to work. But, at the same time, you can quickly convolute your markup if you use them frequently. So, my tip is that if you want to support IE6, to only use PNGs when absolutely necessary (for alpha-transparency). And, to use GIFs and JPGs for now until IE6 browser share dwindles to acceptable levels.
So, there you go. I believe that these eight tips will help you build cross-browser websites with a lot less work. If you have any tips, feel free to post them in the comments and I will update this post.