I'm currently working on the CSS template for a new client and running into a strange issue.
The design calls for a separation bar of repeated background to resemble a negative strip (site is a portfolio piece for a commercial photographer), and below that the continuation of a gradation.
For some reason, however, in Mozilla-based browsers a gap (visually as if it was a top margin) is appearing in the background repeat (gradation) in the pageblock.
To see it, visit http://www.spearsphotography.com/test_index.html in Firefox or another Moz browser.
The strange thing is... I noticed the contained news items were not being pushed down (that is to say, it wasn't a margin issue). I tried changing the CSS definition of the background image position on the div, etc. Finally to see exactly where the browser was drawing the div, I set a 1px green border on #pageblock. Oddly enough it fixed it! (weird, huh?) This is especially strange since the float: right; div with the splash image -is- affected by the mysterious "margin".
You can see that by going to http://www.spearsphotography.com/test_index2.html. (Contains an inline style to add the border to #pageblock
The css file is at http://www.spearsphotography.com/css/style.css
I just don't get it. This was all coming together so quickly from the Photoshop mockups, and now a brick wall that is driving me mad.