IE is making my elements disappear!

[jonsan32]

My test page is here: http://www.jamtournaments.com/p/blog-page.html and I have my main elements (the brackets) disappearing whenever I view in Internet Explorer. They actually show until I hover anywhere around them, or when I switch to a new tab. So weird and so annoying. Looking around the internet, I've tried a number of "solutions" to no avail. Would any of you dare to take a shot. Just throw me whatever you can think of. I'm willing to try it all. Thanks a ton.

Here's what the other site's gave me:

* adding <div></div> to every cell that isn't showing

* adding position:relative; instead of absolute

* adding div { display: inline-block; }  

* adding div { display: block; } 

* adding { zoom: 1; } to my code 

* adding filter:alpha(opacity=100);

And here's the primary part of the code that probably needs the tinkering. If you need me to post it all here, I can. But viewing my page's source is probably easiest. THANKS!

   .bracket
        {
   width:160px;
   position:relative;
   font-family:Verdana,Helvetica,Arial,Sans-Serif;
   font-size:10px;
   color:#ffffff;
   text-align:left;
   margin:.5em 0;

   -moz-box-sizing:border-box;
   box-sizing:border-box;
   height:100px;
   padding:.5em;
   border-bottom: 1px solid #242424;
   border-top: 1px solid #464646;
   border-right: 1px solid rgba(0, 0, 0, .5);
   border-right: 1px solid rgba(0, 0, 0, .5);  
   position:relative;

   background: #333333;
   filter: none;
   background: -moz-linear-gradient(top,#464646 0,#242424 100%);
   background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#464646),color-stop(100%,#242424));
   background: -webkit-linear-gradient(top,#464646 0,#242424 100%);
   background: -o-linear-gradient(top,#464646 0,#242424 100%);
   background: -ms-linear-gradient(top,#464646 0,#242424 100%);
   background: linear-gradient(top,#464646 0,#242424 100%);

   -webkit-box-shadow: 0 1px 0 rgba(160, 160, 160, 0.75) inset,0 9px 6px -7px  rgba(0, 0, 0, 0.75);
   box-shadow: 0 1px 0 rgba(160, 160, 160, 0.75) inset,0 9px 7px -7px  rgba(0, 0, 0, 0.75); 

   -webkit-text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
   text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8); 

        }

[pixelsoul]

First, I would never use the below in CSS. It is a wild card and can cause some strange behavior if you are not careful, and it "can" possibly add to your page load. It is just not that great of an idea.

*{}

The brackets dissapearing actually seems to happen when I hover over any of your tabs. I can actually move around them get to the brackets, as long as I don't go to the tabs. The good news is that, it is only happening IE7. In both IE8 and IE9 the problem does not happen.

This is most likely the culprit:
SCRIPT1028: Expected identifier, string or number

You have a javascript error somewhere more than likely. I would love to say where, but you are loading a ton of js files.

[pixelsoul]

Oh, and another problem... you are forcing IE7 mode on all IE browsers.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>

So unless someone in IE8 or IE9 opens up the developer tools on IE and forces the browser to use the other two modes they are going to see the problem, regardless of the version of IE. If you are forcing IE7 on purpose for some reason, I would change what ever reason is behind it and and not force IE to use it.

[pixelsoul]

Meh, sorry for so many responses here. I may have actually found your problem.

<script type="text/javascript">
        gapi.load("iframes-styles-bubble", function() {
          if (window.iframes && iframes.open) {
            iframes.open(
                '//www.blogger.com/navbar.g?targetBlogID\75839338363578512595\46blogName\75+%E2%98%85+50+ALL-STARS++%E2%98%85\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://www.50allstars.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.50allstars.com/\46targetPageID\0751102372375454822038\46blogPostOrPageUrl\75http://www.50allstars.com/p/mlk-day-showcase.html\46vt\75-3111776248123991377',
                {
                  container: "navbar-iframe-container",
                  id: "navbar-iframe"
                },
                {
                });
          }
        });
</script>

I bet it is being caused by the comma after id: "navbar-iframe"},
Try replacing that with this and see if it fixes it.

<script type="text/javascript">
        gapi.load("iframes-styles-bubble", function() {
          if (window.iframes && iframes.open) {
            iframes.open(
                '//www.blogger.com/navbar.g?targetBlogID\75839338363578512595\46blogName\75+%E2%98%85+50+ALL-STARS++%E2%98%85\46publishMode\75PUBLISH_MODE_HOSTED\46navbarType\75LIGHT\46layoutType\75LAYOUTS\46searchRoot\75http://www.50allstars.com/search\46blogLocale\75en\46v\0752\46homepageUrl\75http://www.50allstars.com/\46targetPageID\0751102372375454822038\46blogPostOrPageUrl\75http://www.50allstars.com/p/mlk-day-showcase.html\46vt\75-3111776248123991377',
                {
                  container: "navbar-iframe-container",
                  id: "navbar-iframe"
                });
          }
        });
      </script>

[jonsan32]

Wow, thank you. Thank you so much. I'll go check to see if it works... and I will definitely try my hardest to implement your other suggestions as well. I really have no clue what I'm doing code-wise, I just try my hardest. Regardless of the results, I really appreciate you helping me.

I'll post back in a bit.

[jonsan32]

The emulator thing was spot on. The comma removal didn't work, however. I'm more than happy now that I have it working for 95% of my people, though. You're awesome. If anyone can figure it out for IE7 and below, throw any info my way.

Thanks again. I'm marking this as solved. Great work. Helped me tons.