The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

What am I doing wrong here?

I decided to redesign my site using the xhtml/css approach without any tables. It will be the classic three column layout. It starts to look the way I want it to look but there are some browser issues.

The site looks good in Netscape 7.1

The site almost looks as good in IE 6.0 Only there's a small (like 2px) gap between the top bar and the navigation (links 1 - 7)

If you color the background of the columns you will see that the top margins are roughly the same.

It's the content inside the columns that's has different margins. Most elements have default margins set by the browers and this varies between browsers.

Mozilla seems to put a top and bottom margin on <p> element (1 em i think) whereas ie just puts a bottom margin. The same applies to headings and lists etc to varying degrees. Also some browsers use padding and some use margins.

Therefore if you have any differences it's always good to set the margin and paddings explicitly and this should even things up.

You have not wrapped your rightcol content in a <p> element so it will be higher than the leftcol which is in a list. In mozilla the list has deafult top margin but the rightcol will have none.

Also in the rightcol you have specified a padding of 10;. You have missed the px off the end and mozilla will ignore the size. However IE will take a guess you mean pixels and apply it.

You have the headings "Breadcrumb" and Header. header is wrapped in a heading tag but Breadcrumb sits alone. Therefore margins will be applied to one and not the other. Again this is only in mozilla and accounts for the differences between browsers.

Make sure your content is wrapped in semantically correct mark-up.
Not this:
<div>Hello</div>
But This
<div><p>Hello</p></div>

Then you can set margins and padding for the <p> element to remain consistent between browsers.

There is a bug in Mozilla that you have to watch out for and it's called the top margin bug. Occasionally static positioned block elelments will use the top margin of its first child element instead of it's own. You can use something like this to fix it (div > h1 {margin-top:0}