unwanted space under image in IE

Hi All

I am working on a web page that has a banner image and 2 DIVS underneath. In IE there is an unwanted space of about 2px between the banner image and the 2 DIV's below, but only in IE. Firefox and Opera do not display this space. Anyone have any ideas how I can get rid of this?

Also, anyone have any ideas why the paragraph in the right DIV has space above it in Opera and Firefox but not in IE?

Finally, I want the navbar on the left to extend to the same height as the right DIV but when I make the height of the left DIV the same as the right in the CSS it doesn't look the same height in IE? What is the best way to make the left and right DIV's the same height in all browsers?

Here is the link:

http://www.sjohnsonart.co.uk/HTML/chants.html

Thanks,

craig

If you change the display status to block, the gap will disappear. As for the columns being equal height, faux columns is the best route: http://www.alistapart.com/articles/fauxcolumns/

A Google search for "faux columns" will give you a bazillion of results if you don't like AListApart's.

I wonder if they are sorting that problem in css3.
it's so annoying