Ok I did that (by the way when you commented it out, you meant to delete it alltogether right? because doesent that essentially serve the same purpose from a viewing the site on your browser perspective?) - and it fixed the problem now I am just having a bit of trouble repositioning the elements but I think I can figure it out.
So is using relative positioning less reliable and more bug potent than non relatively positioning elements, or was I just doing something wrong in particular with my usage of relative position?
I am not able to reproduce the gap when I import your site. I would suspect that thre is some conflicting CSS or java script causing the issue. Try removing any javascript you have added to the page to see if your still have the problem. Then try removing any of your CSS Form the page till you find the culprit.Remember to make a backup before you start removing parts.
The over lap on the add to cart page is because of the position relative setting on the .productTop selector, change it to:
.productTop {
background-image: url("http://www.socalstyleonline.com/layout/producttopspan.png");
background-repeat: repeat-x;
/*position: relative;*/
width:100%;
height:33px;
}



