I’m having difficulty getting my footer image in Internet Explorer 8 to display on my site datingshotgun.com. Specifically “footer-logo.png” which is injected into the 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 Up Now</h1>
<p class="description">Be the first to receive a weekly dose of eligible<br />bachelors handpicked by two girls on the 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 as $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 for 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 Soon
/*-----------------------------------------------------------------------------------*/
.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 Up Now
/*-----------------------------------------------------------------------------------*/
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 a {
background: url('../images/flirt-logo.png');
width: 120px;
height: 43px;
margin: 0 auto;
cursor: pointer;
display: block;
}
IE8 and lower do not properly recognize unknown elements, which causes various problems.
To fix this, you need to use a JavaScript fix such as html5shiv.