Paragraph tags in Conflict with Meyer's Reset in IE7?

Question

Working on a rather small, and simple layout, I decided to use Meyer's CSS Reset rules to clear some of the expected discrepancies between browsers. All was working fairly well until I decided to add a few paragraphs into a couple nested divs.

Once I placed the paragraph-tags within the second nested div, the background images of both the parent, and the grant parent divs vanished in IE7.

Removing the paragraph tags (and going with untagged-text) returns the background images. Additionally, leaving the tags and removing reference to the reset.css file restores the background images.

Obviously I don't want to go with either of those routes to solve this issue. Any CSS gurus here know what is taking place?

Demo: http://www.sampsonresume.com/projects/patriot-depot/

Answer 1

Oddly enough, when I remove the following rule from the reset.css file, the issue is resolved:

background:transparent

This rule is applied to the first large block of matched elements, so I'm not sure the implications it will have in the long run. Hopefully there's a better solution, as I'm a little uneasy about editing Meyers' reset.css in order to "fix" my problem.

Answer 2

It looks like a version of the disappearing content bug in IE.

Add zoom:1 to div.pd_horiz_content and div.pd_horiz_content_b. That will invoke 'hasLayout' in IE and your background will show up.

You can also invoke hasLayout by adding a dimension (width:960px) to the divs. This would probably make more sense in your case since your divs have a fixed width based on the background images.