Quick tip of the day for solving layout compatibility problems in Internet Explorer involving blocks.

The general golden rule for creating browser compatible markup/css is to first ensure it looks perfect in Firefox/Safari, and then even out the bugs to make it look good in Internet Explorer. Much of this reasoning is because more often than not, alot of cross browser compatibility bugs are specific to Internet Explorer only. Also because of this, it is usually more difficult to do it first in Internet Explorer, and then make sure it look consistant in Firefox/Safari. 
 

Today's tip is very short, but occurs to most of the layout positioning problems from block elements.

ALWAYS, define the width and height of the block element dimensions, even if its not fixed.

ie:

ul.nav {
    width: 400px;
    height: auto;
}

An additional tip to add for IE6 compatibility, with all floated block layout elements, add:

display: inline;
overflow: hidden;

I like to write my floats like this:

float: left; display: inline; overflow: hidden;

Keeping these as a habit would make your first completed html/css look alot more compatible on Internet Explorer, and save you alot of extra hours in tweaking it.