Member Avatar for 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.

  • 3 Contributors
  • 2 Replies
  • 119 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by tgreer
Member Avatar for 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;
}
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.