This bug is really making my head hurt. For some reason my table has a 1px gap on the left and right side of the middle cell. I have no idea what is causing this. You can see an example here: http://jsfiddle.net/JdayW/1/
What I need to have is an image in the middle cell that acts as a "mask" so you can see the background image behind it. There needs to be a solid color to the left and right of the image that stretches to the edges of the browser window. I figured a table was the best way to achieve this.. but I could be wrong. The gaps go away when I put a background color on the middle cell or the entire table, but obviously that is not going to work for me because I cannot have a background color behind the image.
In the site I'm building this "mask" image with transparency will scroll over the the fixed background behind it. So I cannot just make the png a jpg with the background on it.
Is this happening because I have the table set to width:100% and the middle cell set to a fixed 300px width?
For some reason, your td tags were causing the margins. Setting them to 0 and giving the left and right td tags a width of 50% seemed to fix the problem:
table {width:100%; height:300px; border-collapse: collapse; border-spacing: 0;}
td.left, td.right {background-color:green; margin:0; padding:0; width:50%;}
td.middle {width:300px; margin:0; padding:0;}
Working jsfiddle: http://jsfiddle.net/JdayW/34/