html - Can't get footer image to display in IE8? -
html - Can't get footer image to display in IE8? -
i'm having difficulty getting footer image in net explorer 8 display on site datingshotgun.com. "footer-logo.png" injected tag.
<!doctype html> <html> <head> <meta charset="utf-8"/> <title>datingshotgun.com</title> <link rel="stylesheet" href="css/styles.css"/> <!-- typekit --> <script type="text/javascript" src="http://use.typekit.com/mtx2hld.js"></script> <script type="text/javascript">try{typekit.load();}catch(e){}</script> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <!-- custom script --> <script src="js/scripts.js"></script> <!-- google analytics --> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setaccount', 'ua-28481508-1']); _gaq.push(['_trackpageview']); (function() { var ga = document.createelement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getelementsbytagname('script')[0]; s.parentnode.insertbefore(ga, s); })(); </script> </head> <body> <header> <div class="logo"> <h1>dating shotgun</h1> </div> </header> <div class="content"> <div class="comingsoon"><p class="comingsoon_image"></p></div> <h1>sign now</h1> <p class="description">be first receive weekly dose of eligible<br />bachelors handpicked 2 girls on prowl.</p> <form action="index.php" method="post"> <input type="email" class="email" name="email" maxlength="50" placeholder="email address"> <input type="text" class="zip" name="zip" maxlength="5" placeholder="zip code"> <input type="submit" class="submit" name="submit" value="submit"> <p class="errors"> <?php if (count($errors) != 0) { foreach($errors $error) { echo $error . "<br />"; } } else { echo $success; } ?> </p> </form> </div> <footer> <p class="line"></p> <a href="http://flirtexting.com/" title="flirtexting"></a> </footer> </body> </html> css
/*-----------------------------------------------------------------------------------* colors: grey: #cccccc; pink: #ff0099; */ /*-----------------------------------------------------------------------------------* /*css reset /*-----------------------------------------------------------------------------------*/ /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 license: none (public domain) */ 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; } /*-----------------------------------------------------------------------------------* /*general /*-----------------------------------------------------------------------------------*/ * { padding: 0; margin: 0; } html { background-color: #ffffff; color: #cccccc; font-family: "proxima-nova", helvetica, sans-serif; } body { } header { } .content { } /*-----------------------------------------------------------------------------------* /*logo /*-----------------------------------------------------------------------------------*/ .logo { background: url('../images/datingshotgun-logo.png'); width: 380px; height: 60px; display: block; text-indent:-9999px; margin: 60px auto 54px auto; } .logo h1 { display: block; text-indent:-9999px; } /*-----------------------------------------------------------------------------------* /*coming /*-----------------------------------------------------------------------------------*/ .comingsoon { /*background: url('../images/comingsoon.jpg') no-repeat; width: 1020px; height: 67px; margin: 0 auto 0 auto;*/ border-top: 1px solid #cccccc; } .comingsoon_image { background: url('../images/comingsoon.png'); width: 115px; height: 12px; margin: -6px auto 0 auto; } /*-----------------------------------------------------------------------------------* /*sign /*-----------------------------------------------------------------------------------*/ h1 { font-size: 18px; color: #000000; text-align: center; margin: 45px 0 18px 0; text-transform: uppercase; } .description { font-size: 14px; text-align: center; font-family: "ff-tisa-web-pro", georgia, serif; line-height: 1.25em; color: #999999; } /*-----------------------------------------------------------------------------------* /*form /*-----------------------------------------------------------------------------------*/ form { width: 410px; height: 35px; margin: 17px auto 40px auto; color: #999999; } input { font-size: 13px; float: left; margin-right: 5px; line-height: 2.5em; margin-bottom: 5px; } input:focus { outline: none; } .email { width: 186px; height: 33px; padding-left: 10px; } .zip { width: 77px; height: 33px; padding-left: 10px; } .email,.zip,.submit { border: 1px solid #cccccc; } .email:focus,.zip:focus { border: 1px solid #8c8c8c; background: url('../images/topfade.gif') repeat-x; } .submit { width: 89px; height: 35px; background-color: #cccccc; color: #ffffff; font-size: 13px; background: url('../images/submit.png') repeat-x; } .submit:active { color: #8c8c8c; } .errors { color: #ff0099; margin: 5px auto 0 auto; width: 400px; height: 50px; text-align: center; font-size: 12px; } /*-----------------------------------------------------------------------------------* /*footer /*-----------------------------------------------------------------------------------*/ .line { background: url('../images/line.png'); width: 460px; height: 1px; margin: 0 auto 23px auto; } footer { display: block; height: 100%; } footer { background: url('../images/flirt-logo.png'); width: 120px; height: 43px; margin: 0 auto; cursor: pointer; display: block; }
ie8 , lower not recognize unknown elements, causes various problems.
to prepare this, need utilize javascript prepare such html5shiv.
html css internet-explorer-8
Comments
Post a Comment