IE7 content is below container

Question

on this site, http://dncminneapolis2012.com/new2 the content (where it says Minneapolis 2012 Democratic National Convention) is hidden beneath another div in IE7.

Can anyone tell me how to fix this?

Everything works great in Chrome, Firefox, and Safari

Answer 1

I don't have IE7 atm and this is just a tip not an answer, but there's a bug in which if you have an absolutely positioned element that has floated siblings, the AP element gets completely hidden.

I notice you have a ton of floats/AP'd elements so that may be the case.

Things to do when debugging:

• remove all elements that aren't vital
• use overflow:hidden to make sure elements arent being overly expanded and float drop occurs
• apply zoom:1; all over the place through say, *{ zoom:1 } to trigger hasLayout.

I might take a look at this in the morning when I have IE7 available @ work

Answer 2

Looks to be the <div class="main_content_wrapper">, as far as the IE developer toolbar can tell. The mysterious transluscent overlay randomly disppears as you click around in the DOM the toolbar displays, so not sure why it's there. Possibly something borking on the jquery fade-in routine?

Answer 3

Since they were in separate main divs (not nested under one main div), I had to rearrange my html to get the content to be in front of the container.