Question

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?

Answer 1

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/