Internet 6 and 7 CSS problems

Hi

I am trying to figure out how to fix some errors related to internet explorer 6 and 7. I have read a lot about so-called IE Hacks and the Box Model to find out how to fix the silly behaviours of these version of that browser. My website is working very fine in FireFox, Chrome, Opera and Internet Explorer 8. But I know that some readers have not upgraded to the latest version of microsoft’s browser. I can’t ask my customer to force their readers to upgrade, but I wish I could 🙂

So here is some problems I have in IE6 and 7. I have some boxes in which I have made up of some div tags controlled by my main css file.

In the other browsers I have a space between the boxes around them putting in a paragraph with clear:both

These are my related css

.clearboth { clear:both;}

#content p, #content ul, #content ol, #content dd, #content pre, #content hr {
margin-bottom:18px;
}

.ma-product {
height:460px;
}

.ma-product {
background-color:#CCCCCC;
float:left;
height:100%;
margin:0 15px 0 0;
min-height:460px;
padding:10px;
text-align:left;
width:368px;
}

You can see my website here:

http://www.multiarena.no/wordpress/produkter/

The gray boxes behaving in a strange way in Internet Explorer 6 and 7

Another problem I have is that IE6 and 7 is showing the bottom of the footer in a strange way. FireFox show it the way I want it to be.

I use FireFox and Firebug tool all the time but I wish there could be a wonder tool that also fix problems with other browsers.

If you can help I can give more of my CSS code later.

Thanks in advance!