First off we will start with CSS. This first one is a bit controversial, some people swear by it, some people hate it, all i know, it helps me out a lot. Using a reset CSS helps make all the base values for things like margin and padding equal across all browsers. Some people claim they end up having to write more code when they have to re-declare bold tags and what not, but the benefits far outweigh the negatives. Starting with a clean slate makes development from that point much easier and removes the need for browser specific hacks. You can also remove some of the reset values to make it more suitable to your development style, all in all, a great way to start off a project. Although, adding this to a preexisting project can cause more problems than it solves. The one i use most is available here.
Another tip for using CSS is avoiding the use of floats. Floats i find are rendered differently in most browsers so i find it best to simply not use them whenever possible, instead relying on positioning elements with top and left. I understand sometimes you may have to use floats, i just prefer to limit they’re use. A tip for using positioning, setting the position to absolute will set the start point of your top and left values at the top left of the browser, but if you set the container div to position relative, the container will still be in the same position, but the absolutely positioned div will have it’s start point set to the top left of the containing div.
Its also important to note the use of z-index on Internet Explorer 7 and earlier. Each positioned element in IE creates a new stacking order, starting from 0, instead of using a global stacking order like most browsers. This can cause problems when you want one element to appear over another, but it is nested deeper in the page. The best way to solve this problem is to keep z-indexed elements on the same level in the html, or if you wish to have it appear over all the content, simply place it right below the opening body tag.
As for HTML, the only real change i make is setting the doctype. Whenever i generate a new HTML page, i make sure the doctype is strict rather than transitional (sometimes set by default). It forces Internet Explorer to behave more like the other modern browsers and generally just makes development easier, This will also most likely give you some problems if changing it in a preexisting project, so its best to start from scratch with this one. The most common doctypes i use are:
HTML: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
If your starting a project from scratch, take some time to setup a few of the things i have mentioned, and i think you will find you’ll be spending a lot less time doing the terrible chore that is browser testing. I take no responsibility for any headaches you get from implementing these on an existing project
If you have any other tips for taming the web, please add a comment below.