css - DIV Background Image Doesn't Show in Firefox or Chrome (But only online). Online it works for IE? -
i'm having issues having image isn't showing properly. i've scouring internet past hour , been trying various different ideas, i'm stumped. on webpage, have image of text "vitant" showing fine in browsers when working offline.
after uploaded site webhost, whatever reason, 1 background image stopped showing in firefox , chrome. however, shows fine in ie. shows fine in mobile versions of firefox , chrome.
i using image background-image div (#vitant-text).
webpage: http://www.joshhemmyonline.com/vitant_test
link image: http://www.joshhemmyonline.com/vitant_test/_images/vitant_ad_banner_text.png
*note: image in question should displaying right above text "the 2 step treatment better sleep & more energy"
the relevant id #vitant-text
source html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>vitant: 2-step sleep/energy solution. inquire sample today!</title> <link href="_css/style.css" rel="stylesheet" type="text/css"> </head> <body> <header> <div id="header-container"> <a href="#" id="logo" name="top">vitant sleep & wakefulness aid</a> <div id="main-banner"></div> <div id="sample-div"> <h1>try sample</h1> <p>* no cancellation required<br /> * no obligation</p> <form action="" method="post"> <input name="" type="text" id="name_text_field" value="name..." onfocus="if(this.value==this.defaultvalue)this.value='';" onblur="if(this.value=='')this.value=this.defaultvalue;"> <input name="" type="text" id="email_text_field" value="email..." onfocus="if(this.value==this.defaultvalue)this.value='';" onblur="if(this.value=='')this.value=this.defaultvalue;"> <input name="" type="image" src="_images/tryitout_button_blank.png" id="submit-button-form"> </form> </div> <div id="vitant-box"></div> </div> </header> <section> <div id="content_container"> <div id="vitant-text"></div> <h1 id="contentheadingtext">the 2 step treatment <span>better sleep</span> & <span>more energy</span></h1> <div id="work-div"> <h1>how work?</h1> </div> <div id="nightly-supplement-div"> <h1>nightly supplement ingredients</h1> <p class="instructions">*take 1 tablet before going bed promote relaxtion , drowsiness aid in falling (and staying) asleep.</p> <p class="ingredient-text"> <span>melatonin</span> hormone naturally produced in brain. studies have shown melatonin plays role in sleep , wake cycles. insufficient levels of melatonin in one’s body common cause of sleep disorders. use of melatonin supplements can improve , regulate normal sleep cycle.</p> <p class="ingredient-text"> <span>l-theanine</span> amino acid has been shown both calm brain , enhance concetration. amino acid comes tea leaves. tea has been used centuries calming , relaxing symptoms provided drinkers. studies suggest l-theanine largely responsible this.</p> <p class="ingredient-text"> <span>gaba</span> (better known γ-aminobutyric acid) amino acid has been shown regulate & relax body’s neurological system. has been shown have significant role in regulating , sustaining muscle tone within human body.</p> <p class="ingredient-text"> <span>5-htp</span> amino acid (5-hydroxytryptophan). body produces 5-htp tryptophan, amino acid, , converts serotonin, important chemical regulating brain , mood-enchancements. serotonin responsible hunger , sleep.</p> <p class="ingredient-text"> <span>lemon balm</span> perennial herb mint family. leaves have been used treat many afflictions stomach disorders alzheimer’s disease. leomon balm contains chemicals have sedative , calming effect.</p> <p class="ingredient-text"> <span>passion flower</span> medicinal herb has long been used sedative.</p> <p class="ingredient-text"> <span>chamomilla recutita</span> daisy-like plant bas been used throughout centuries medicinal uses. along being used treat stomach ailments , anti-inflammatory, plant has traditionally been used sleep aid relaxing properties.</p> <p class="ingredient-text"> <span>valerian</span> has been used thousands of years throughout europe , asia sedative. studies suggest valerian effective @ helping people insomnia. can provide better-quality sleep , can fall asleep quicker.</p> </div> <div id="vertical-divider"></div> <div id="daily-supplement-div"> <h1>daily supplement ingredients</h1> <p class="instructions">*take 1 tablet first thing in morning provide body effective energy wake fast!</p> <p class="ingredient-text"> <span>caffeine</span> world’s effective & powerful over-the-counter mental altertness , energy aid.</p> <p class="ingredient-text"> <span>green tea extract</span> rising start in numerous health benefits. green tea effective providing energy , according university of maryland medical center, may boost metabolism , burn fat.</p> <p class="ingredient-text"> <span>essential vitamins</span> important every day health, well-being, , energy. we’ve packed plenty of vitamin b3, b6, b9, b2, , b12 supplement kick in morning.</p> <p class="ingredient-text"> <span>ginko biloba</span> derived tree has been used medic- inally thousands of years. evidence seems suggest useful memory enhancement , mental clarity.</p> <p class="ingredient-text"> <span>ginseng</span> herb known increase energy, have anti-fatigue components, relieves stress, , increase memory.</p> <p class="ingredient-text"> <span>dimethylaminoethanol (dmae)</span> organic compound. short-term studies have shown compound provide increase in alertness positive influence on mood.</p> <p class="ingredient-text"> <span>taurine</span> amino acid helps regulate heartbeat, muscle contractions, , energy levels.</p> <p class="ingredient-text"> <span>guarana</span> comes plants in south america. has long been used increase energy , mental alertness. guarana contains caffeine, theobromine, , theophylline, known stimulants.</p> <p class="ingredient-text"> <span>antioxidants</span> come in various forms, have been added our daily supplement. vitamins a, c, , e have antioxidant properties. antioxidants have power effect on health , energy levels.</p> <p class="ingredient-text"> <span>glucuronolactone (dgl)</span> believed aide in detoxification, freeing hormones , other chemicals, , biosynthesis of vitamin c. used glycogen depletion preventing other substances depleting glycogen supplies in muscles.</p> <p class="ingredient-text"> <span>yerba mate</span> derived leaves of shrub. herb all-natural source of caffeine. form many believe not produce negative side effects.</p> <p class="ingredient-text"> <span>l-theanine</span> amino acid, derived tea leaves, has been shown calm brain while enhancing con- centration.</p> </div> <div id="creator-message-div"> <h1>message creator:</h1> <p class="create-message">“waking in morning has long been difficult task me. after alarm clock rings still in ‘wake-up’ phase 20-30 minutes, waking once done drinking morning cup of coffee. knew needed me going faster in morning , knew needed improve poor sleeping habits, taking valuable energy morning routine. thus, created 2 supplements part of daily 2-step regimen. regimen safe everyday use , 2 supplements work provide me better night’s sleep , energy require in morning.”<br /> <span>-josh hemmy (vitant creator)</span></p> </div> </div> </section> <footer> <div id="footer-container"> <p class="footer-tagline1">start journey <span>best sleep</span></p> <p class="footer-tagline2">and <span>most energy</span> have ever experienced!</p> <p class="obligationtext">there no obligation & nothing cancel</p> <a href="#top" class="footerbutton">try out</a> <div id="vitant-footer-logo"></div> </div> </footer> </body> </html> source css:
@charset "utf-8"; /* css document */ /********** css reset **********/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* html5 display-role reset older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /********** main body styles **********/ body { font-family: verdana, geneva, sans-serif; font-size: 62.5%; background: #fff; } /********** header styles **********/ header { display: block; height: 467px; background: url(../_images/header_main_bg.png) repeat-x 0 0; } #header-container { display: block; width: 1000px; margin: 0 auto; height: 467px; position: relative; } #logo { float: left; display: block; width: 244px; height: 115px; background: url(../_images/logo.png) no-repeat 0 0; text-indent: -9999px; margin: 36px 0 0 47px; } #main-banner { width: 1000px; height: 304px; position: relative; top: 163px; background: url(../_images/main_banner.png) no-repeat 0 0; } #sample-div { position: relative; top: -241px; left: 604px; display: block; width: 291px; height: 306px; background: url(../_images/sample_form_bg.png) repeat-x 0 0; border: 2px solid #b3b3b3; -webkit-border-radius: 10px; border-radius: 10px; } #vitant-box { display: block; width: 321px; height: 183px; background: url(../_images/vitant_box.png) no-repeat 0 0; position: absolute; top: 349px; left: 73px; } #sample-div h1 { text-align: center; font-size: 24px; font-weight: bold; color: #2a3333; margin-top: 21px; } #sample-div p { color: #2a3333; font-size: 11px; margin: 15px 0 0 30px; } #name_text_field { margin: 18px 0 0 26px; padding-left: 30px; padding-right: 5px; width: 205px; height: 32px; background: url(../_images/name_textfield.png) no-repeat 0 0; border: none; color: #2a3333; font-size: 20px; } #email_text_field { margin: 18px 0 0 26px; padding-left: 30px; padding-right: 5px; width: 205px; height: 32px; background: url(../_images/email_textfield.png) no-repeat 0 0; border: none; color: #2a3333; font-size: 20px; } #submit-button-form { display: block; width: 232px; height: 55px; background: url(../_images/tryitout_button.png) no-repeat 0 0; margin: 29px 0 0 30px; } #submit-button-form:hover { background-position: 0 -55px; } /********** content styles **********/ section { display: block; width: 100%; min-height: 658px; background: #f2f2f2 url(../_images/content_main_bg.png) repeat-x 0 0; } #content_container { margin: 0 auto; display: block; width: 1000px; min-height: 658px; overflow: hidden; } #vitant-text { float: left; width: 1000px; height: 65px; background: url(../_images/vitant_ad_banner_text.png) no-repeat 0 0; margin-top: 65px; } h1#contentheadingtext { font-family: verdana, geneva, sans-serif; font-size: 28px; text-align: center; color: #2a3333; } h1#contentheadingtext span { color: #9e3b02; font-weight: bold; font-style: italic; } #work-div { width: 368px; height: 50px; background: #333b3a; margin: 30px auto; } #work-div h1 { color: #fff; font-size: 30px; font-weight: bold; line-height: 50px; text-align: center; } #nightly-supplement-div { float: left; width: 478px; min-height: 1100px; padding-right: 20px; font-size: 14px; margin-top: 30px; } #vertical-divider { float: left; width: 4px; height: 1028px; background: url(../_images/vertical_divider.png) no-repeat 0 0; margin-top: 80px; } #daily-supplement-div { float: left; width: 478px; min-height: 1100px; padding-left: 20px; margin-top: 30px; } #nightly-supplement-div h1, #daily-supplement-div h1 { font-size: 24px; color: #333b3a; } #nightly-supplement-div p.instructions, #daily-supplement-div p.instructions { color: #9e3b02; font-size: 14px; font-style: italic; line-height: 18px; margin-top: 5px; } #nightly-supplement-div p.ingredient-text, #daily-supplement-div p.ingredient-text { color: #525555; font-size: 14px; font-style: italic; line-height: 18px; margin-top: 36px; } #nightly-supplement-div p.ingredient-text span, #daily-supplement-div p.ingredient-text span { color: #2a3333; font-size: 18px; } #creator-message-div { float: left; clear: both; margin-top: 100px; } #creator-message-div h1 { font-size: 18px; color: #2a3333; } #creator-message-div p.create-message { margin-top: 22px; margin-bottom: 42px; color: #525555; line-height: 20px; font-style: italic; font-size: 14px; text-indent: 30px; } #creator-message-div p.create-message span { font-weight: bold; } /********** footer styles *********/ footer { background: #fff; border-top: 1px solid #cacaca; overflow: hidden; } #footer-container { margin: 0 auto; width: 1000px; min-height: 141px; color: #2a3333; font-family: verdana, geneva, sans-serif; } .footer-tagline1 { float: left; font-size: 18px; color: #2a3333; margin-top: 35px; margin-left: 40px; } .footer-tagline1 span { font-weight: bold; font-style: italic; } .footer-tagline2 { float: left; font-size: 18px; margin: 6px 0 0 206px; } .footer-tagline2 span { font-weight: bold; font-style: italic; } p.obligationtext { float: right; font-size: 14px; margin-top: -40px; } a.footerbutton { float: right; margin: -20px 30px 0 0; display: block; width: 232px; height: 55px; background: url(../_images/tryitout_button.png) no-repeat 0 0; text-indent: -9999px; } a.footerbutton:hover { background-position: 0 -55px; } #vitant-footer-logo { width: 85px; height: 43px; float: left; background: url(../_images/footer_logo.png) no-repeat 0 0; } if has ideas or suggestions appreciate it!
if you're using adblocker extension, try disable. background can't shown me, when adblocker active. because these extensions hide banner , similar named selectors , file names, best way if change names banner
Comments
Post a Comment