Bizarre CSS Behavior in Moz Without Border on Div

[aiden]

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.

[Sailor_Jerry]

I think the problem is with the code below. You need a space between "00" on the background style

#filmstrip {
 width: 100%;
 height: 23px;
 margin: 0;
 border-style: none;
 background: url(../img/filmstrip.gif) 00 repeat-x;
}

[tgreer]

That's one error... see if that fixes it. Since you haven't posted any code, and we can't save the "complete" page, with graphics, etc. it's hard for us to experiment/troubleshoot.

If that doesn't fix the issue, I'd start experimenting with the "display" CSS attribute.