IE6 and CSS Specificity

My content is hidden from view

[deconspray]

I created a website (on WordPress). Here is the URL:
<snip>

In all browsers (except IE6), the site and all its pages display properly.

In IE6, the main content area does not display, yet the markup & content are in the HTML. Here's is an example of how it looks: <snip>

<div id="main">
 <div class="gutter">
 <div id="content">
 <div class="post" id="post-4"> /* This is a WordPress wrapper around the post/page content */
 ... content ...
 </div>
 </div>
 </div>
</div>

On pages where only straight text & images are presented, the pages displays properly in IE6. However, any page that contains content inside of <div>s that float, contain other floats (for column creation), etc., this content does not display at all.

I've spent many hours looking at possible CSS specificity issues. And while I haven't discounted this, my expectation is that the content would still be displayed, just not as expected. However, this content in the <div>s does not display at all.

Any guidance to this problem is greatly appreciated.

[edited by: swa66 at 9:21 am (utc) on Sep. 24, 2009]
[edit reason] No URLs, please see ToS and Forum Charter [/edit]

[swa66]

I don't think it'll be specificity. I'd bet on an IE6 bug. If you select the area is the text there ?

[deconspray]

Thanks swa66. No, I cannot select the "hidden" text & images with my mouse. However, more & more, I do think it's an IE6 bug. However, none of the work-arounds (display:in-line, height:1%, etc.) have worked so far.

Any further ideas?

[swa66]

IE6 has some very hard to work around disappearing content bugs.

Try following the guidance in the pinned posts at the top of the forum and reduce your code so it still shows the problem and is the minimum you can make it.

That way it's more likely to trigger somebody finding/remembering what to do.