Can't get div to display in Firefox or chrome, but it displays in IE

Can't get div to display in Firefox or chrome, but it displays in IE

I have been working on a website and I can't seem to get an element of the
page to display properly in Google Chrome or Firefox. It displays for
literally a second (depending on connection speed) and just disappears. I
can't seem to figure out the problem. In Safari and IE it works perfectly
(as expected). It also works when it is run locally (ie not server, or
local server) on both chrome and Firefox despite it being just a simple
HTML page with no scripting what so ever.
This is the fiddle I have created:
JsFiddle
Code (HTML):
<div id="adbox">
<div class="wrapper clearfix">
<div class="info">
&nbsp;
</div>
</div>
<div class="highlight">
<h2>This is a test <i>123</i></h2>
</div>
</div>
CSS:
#adbox {
background: #020a13
url(http://reallygoodpie.com/PArcadeMachines/images/bg-adbox.jpg)
no-repeat center top;
font-family: Georgia, "Times New Roman", Times, serif;
background-size: 90%;
min-height: 433px;
margin: -56px 0 22px;
/** Needed for IE7 **/
*margin: 0;
*position: relative;
*top: -56px;
}
#adbox .wrapper {
width: 940px;
padding: 54px 10px 26px;
}
#adbox .info {
height: 354px;
width: 450px;
overflow: hidden;
padding: 20px;
border-radius: 5px;
}
#adbox h1 {
color: #ffffff;
font-size: 48px;
font-style: italic;
line-height: 50px;
margin-bottom: 30px;
}
#adbox p {
color: #176eb0;
font-size: 14px;
line-height: 24px;
}
#adbox p a {
color: #176eb0;
}
#adbox div.highlight {
background: #171a1a
url("http://reallygoodpie.com/PArcadeMachines/images/adbox-bg-heading.jpg)
repeat-x left top;
min-height: 82px;
border-color: #000;
color: white;
border-style: solid none;
border-width: 1px;
}
#adbox div.highlight h2 {
color: #484b4b;
color: white;
font-size: 34px;
line-height: 82px;
width: 940px;
margin: 0 auto;
padding: 0 10px;
text-shadow: -3px 0 3px #121413;
}
#adbox div.highlight h2 i {
font-weight: normal;
}
Any help would be greatly appreciated.