Boxes with extra margin (or wrong size)

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

For a site I'm working on now, I've given up on full
cross-compatibility but since the site has 97% IE6 users, 2% Firefox
and 1% Other, hitting IE6 is critical.

The development site is:

What I have is a basic layout with header, menu, and three lower
columns. In order to paste the background together (from slices out of
illustrator) I also have a thin box (called "topedge" that holds the
image for the top of the lower columns (see site for clarity).

In IE7 and Firefox it looks fine (the upper panels are a bit close but
I can fudge that later).

In IE6 however there is extra space at the bottom of the header, menu
and "topedge" boxes. The CSS for each of these boxes specifies "height"
and the page-wide CSS sets no margin or padding. They also don't have
borders so I presume the box model issues aren't the problem (although
I'm looking for any suggestions).

I haven't heard of anything else that makes IE6 interpret height
incorrectly but hopefully there are some experts out there.

Thanks in advance.


"the nice thing about standards is that there are so many to choose

Site Timeline