Over the course of time I've picked up a lot of habits and practices. Some I've had to quickly break upon further research, but for the most part, I've been able to amass a 'style' that allows me to quickly and very cleanly build websites, while preserving XHTML and CSS validity, that are cross browser compatible. After all, isn't that what we're all going for anyway? Here are a few tips and tricks that I use on a regular basis.

1. Centering Your Website - I get a lot of clients who want their websites centered, also many new designers are eager to accomplish this as well. There are quite a few ways to do this, but my favorite method is using a div container to house everything that sits center. Like so.

HTML

<div id="container">
     <!-- website content here -->
</div>

That will center your container div and set it to a width of 765px (my favorite center size). I would advise steering clear of something like <div align="center"> as align="center" isn't valid XHTML.

2. Use Divs In Place of Tables - I would strongly advise any and all web developers to seriously consider using divs in place of tables. Tables, while useful, really aren't the cleanest, most efficient way to do things. Plus, you'll find your cross browser compatibility becomes easier without using tables to completely structure / house your website. Think of tables like cutting corners. Here's an example of how that will work, its simpler than most would think and to me, easier than keeping track of a thousand td and tr flags. We'll append to our example above. In order to use divs to structure your site your going to want to add two lines to your 'container' div's CSS.

clear: both; /* This will allow us to place more divs inside our container and manipulate them correctly */
overflow: auto; /* Ensures properly handled overflow both X and Y */

Now we have that setup, lets place a menu inside of the container div on the left we'll make it 150px.

HTML

<div id="container">
     <!-- website content here -->
     <div id="mainmenu">
          <!-- main menu content -->
     </div>
</div>

Now we'll create the width and make sure the 'mainmenu' div sits to the left in the 'container' div.

CSS

#mainmenu {
     float: left; /* This will keep the main menu to the left */
     width: 150px;
}

That's basically it. Nothing too complicated. You can keep adding divs inside the 'container' until you've got what your looking for. The CSS 'float: left' can also be a 'float: right' to right-align the div in question. Just make sure, when trying to put divs side-by-side (which you can now do with 'float'), that the widths of the divs sitting side by side don't total more than the width of your 'container' div. So our 'mainmenu' is 150px meaning we can safely put another div floating right next to it with a width of 615px for a total of 765px. Be careful to account for any padding and margins when figuring your widths as they will add to the size of the div and the space you have to work with. All in all, pretty easy. Feel free to view the source on some of my free templates as these are setup using these same principles.

3. CSS CSS CSS, USE IT! My next tip is this: Use as little formatting as possible in your website coding (html). Utilize your CSS file as much as possible. This will greatly clean up your code and get rid of a lot of things that simply shouldn't or don't need to be in your website coding. If you have any doubts about this view the source on a dreamweaver or frontpage website. Your coding should never outweigh your content. Because as always, Content is King!

If your getting frustrated with CSS, that's OK. It takes time, especially if your not used to it. You'll find at first, at least I did, that it get extremely frustrating when comparing results in different browsers. But the closer you adhere to XHTML and CSS standards, the better off you'll be. You'll eventually get to a point where things simply work because your doing it right. It's a beautiful thing.

4. Conditional Statements Sometimes, even at our best, we just can't make something work. (For me, its usually in IE). I won't go into depth about my personal feelings on IE as it causes me to rant and get angry. But know this, there's simply some things in IE that don't make sense, shouldn't be, and are far from valid in any way, shape, or form. I would venture to guess its because Microsoft's product Frontpage writes some horrendous code in design view, and it would look pretty bad if Microsoft's browser couldn't display it right.

Fortunately for those of us who have to make our websites compatible with IE there are a few things that really help us out. First of all, once again, adhere to XHTML and CSS standards. There is no substitution for doing it right and will always aide in your success. Second, when things simply don't fit right, look right, etc in IE (which can happen) you can use conditional statements in the of your website. Say you have a div that is acting up in IE, its too wide or the fonts are messed up, you can simply fix that by stating a IF IE conditional statement after your CSS like so.

<!--[if IE]>
     <style>
          #divid {
               /* modified CSS statements here */
          }
     </style>
<![endif]-->

You can modify any aspect of any CSS statement you've declared earlier in order to fix whats broken in IE. I would use this as a last resort as it may simply be an error in coding or css. You can also specify which version of IE you want to apply certain rules to. Here is a simple informative article on how to use it to the full.

I think I'll make this a several part series and add as time permits. There really are a ton of things that each designer uses to make their job easier and more efficient. I hope you enjoyed reading. Feel free to leave any comments or questions you would like.