Opera CSS Issue: Strange black backround in Opera 9.63 and 10 beta when using a combination of overflow and background-color

Question

I've created a script to create scrollable tables with fixed headers but it is having a strange styling issue in Opera where the background color of the containing div turns black above the scroll bar if I try to set the background color to anything.

This script was tested and works fine in IE6/7/8, Firefox 2/3, Chrome 2/3 and Safari 2/3.

Demo page: http://www.chrisnetonline.com/tests/scrolltable.html

Answer 1

Your stylesheet currently features this hack for IE7:

.scrollable_table table{
     border-spacing:0; *border-collapse: collapse; /* hack is needed for IE7 */}

Remove the hack and the top right corner will correctly use the background colour that you have set for the wrapper DIV

.scrollable_table table{border-spacing:0; border-collapse:collapse;}

It's best practice to create your stylesheets without any hacks or anything browser-specific. And in this case, cannot see why there is a need for border-collapse to be tweaked up like it was.