CODEWITHSUNDEEP
htmlcssbrowser
Brandyn
Brandyn

Reputation: 1017

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.

Upvotes: 3

Views: 854

Answers (3)

Manisha Dayal
Manisha Dayal

Reputation: 110

adbox div.highlight {

background: #171a1a url("http://reallygoodpie.com/PArcadeMachines/images/adbox-bg-heading.jpg) repeat-x left top;

One more thing is that there is a typo mistake... After url you have given " and at the end of it there is no ending ".... Check it out!!!

Upvotes: 0

Vikas Ghodke
Vikas Ghodke

Reputation: 6655

Actually you forget to close the background image url with double quote.. check this fiddle its working now on both chrome and firefox.. and also on safari FIDDLE

/** adbox **/
#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;
}

Upvotes: 0

thirtydot
thirtydot

Reputation: 228162

I think you have AdBlock extensions installed in Chrome and Firefox.

Call #adbox something else.

Upvotes: 5

Related Questions