Just finished banging my head against a wall on this one. Finally figured it out and it was so stupid simple. I had a single fixed background image (936px wide) as a TABLE's header here was my CSS....
/* ------------------------ standardTable -----------------*/
.standardTable{width: 936px; margin: 0 auto; padding: 0; border-collapse: collapse; text-align: left; }
.standardTable thead{margin: 0 auto; padding: 0; text-align: center; background: transparent url(images/standardTableHeadBack.png) no-repeat 0px 0px;}
For some unknown stupid reason, it looked great in IE 7/8 and Firefox but in Chrome/Safari the background would repeat every cell across the THEAD!
The solution is simple: Move your background property over to the TABLE itself, like such...
/* ------------------------ standardTable -----------------*/
.standardTable{width: 936px; margin: 0 auto; padding: 0; border-collapse: collapse; text-align: left; background: transparent url(images/standardTableHeadBack.png) no-repeat 0px 0px;}
.standardTable thead{margin: 0 auto; padding: 0; text-align: center;}
Not sure why this works, but it does. I'm guessing that Safari/Chrome doesn't render the THEAD object as a block element, maybe? Who knows.
