Invisible Div in Chrome

HTML & CSS
1

This thing is blowing my mind.

I just noticed that my website isn’t displaying properly in Chrome. The site looks fine in Firefox and IE, but doesn’t display the “primary” div in Chrome. It’s strange, because using Firebug in Chrome, it shows all of the html for the primary div, it just seems to be invisible.

Any ideas on what could be causing this?

I’ve validated my code, and the errors aren’t the issue.

One thing I’ve noticed is the “overflow:hidden” on the Content div triggers a problem. I figured changing it to “visible” would fix the problem, but instead it makes the whole page go blank except for the background image. Yet, in Firebug, the source code for the whole thing is still there.

I’m totally at a loss here.

Here’s my site: http://www.theparadigmexchange.com/

Here’s the CSS in question (at least, I think):


#content { width:1000px; margin-top:0px; padding-bottom:25px; overflow:hidden; }
#primary { width: 600px; float: left; margin: 20px auto auto 10px; }
#secondary { display:inline; width: 346px; float: right; margin:20px 0px auto auto; background: url(images/sidebar-bg.jpg) repeat; }

Thanks in advance!

2

Hi,

I guess you have fixed this by now as I didn’t see an invisible div in chrome:)

The overflow:hidden would be for clearing your floats and unlikely to be the cause of the problem. If you remove it the background won’t show because the parents height will shrink to zero because floats are removed from the flow.

3

Well…I didn’t exactly fix it. I removed a section of the site (a featured post) and that brought everything back. It’s a temporary fix, but it will do for now. I think it may have had something to do with the wordpress loop I was using to query the featured post before the main loop.

Oh well. Thanks for the thought though…when I try to fix it, I’ll keep that in mind.

4

I guess that’s exactly his problem!

5

Yes it was a play on words hence the smiley :slight_smile:

6

:cool: