Internet Explorer Breaks my links and logo

Question

Here's my problem. I've made a website as an assignment for my web class, and it renders correctly in basically every web browser with minor layout issues here and there. But the second I pull up my index page in IE it breaks the links and doesn't display my logo. It only links to 1 other page with the same issue. But if I manually go to my other pages they render fine without issue.

I've ran all of them through w3c validators, css and html, only error it says is the Meta tag I've put in to force IE out of compatibility mode.

Anybody have any idea why this is? Is it the meta tag? I've not used Javascript or any scripting language, it's all plain HTML and CSS.

HTML for Main Page

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Happy Valley Kennel: Home</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href="styles/hvk_styles.css" rel="stylesheet" type="text/css" media="screen">
<link href="styles/mobilehvk.css" rel="stylesheet" type="text/css" media="handheld, only screen and  (max-width:500px), only screen and (max-device-width:500px)">
<meta name="description" content="Happy Valley Kennel Website">
<meta name="keywords" content="Dog hotel, Gatineau, Ottawa, Chelsea, Pet hotel, Cat hotel, animal hotel, dog, cat, hotel, Wakefield">
<meta name="viewport" content="width=500px, initial-scale=1, maximum-scale=1">
<!--happyvalleypets.ca-->
</head>
<body>
<div id="wrapper">
  <div id="banner"><img id="logo" src="images/NewLogo.gif" width="163" height="220" alt="Dog with Tongue Out Logo">
    <h1 class="HeaderAlign">Happy<br>
      Valley<br>
      Kennel</h1>
    <div id="MobileHeader">
      <h1 class="MobileHeader">Happy Valley Kennel</h1>
    </div>
  </div>
  <div id="navbar">
    <p class="navlinks"><a href="index.html">Home</a></p>
    <p class="navlinks"><a href="hours.html">Hours</a></p>
    <p class="navlinks"><a href="rates.html">Rates</a></p>
    <p class="navlinks"><a href="staff.html">Staff</a></p>
    <p class="navlinks"><a href="testimonials.html">Referances</a></p>
    <p class="navlinks"><a href="links.html">Links</a></p>
    <p class="navlinks"><a href="inquiries.html">Inquiries</a></p>
    <p class="navlinks"><a href="contact.html">Contact Us</a></p>
  </div>
  <nav id="mobileNav">
    <div class="contentTwo"><a href="index.html">Home</a> | <a href="hours.html">Hours</a> | <a href="rates.html">Rates</a> | <a href="contact.html">Contact Us</a></div>
  </nav>
  <div class="content">Happy Valley Kennel provides high-quality, personalized cat and dog boarding, pet grooming and playtime.  Located on a beautiful 25 acre natural setting in the heart of the Chelsea, just 15 minutes from Ottawa, Happy Valley Kennel is a family run business, owned and operated by Jim and Sally Read. </div>
  <div class="contentSix"><img id="theo" src="images/Theo.jpg" width="220" height="200" alt="Theo, great dog">
    <p>Built in 2000, our fully heated and air-conditioned facility offers a comfortable, safe and entertaining home away from home for your pets.  Our aim is to make every pet’s stay as pleasant as possible and to provide ample outdoor daily exercise and fun activities for the dogs and indoor recreation time for cats.</p>
  </div>
  <div class="content"><img id="springer" src="images/springer-spaniel.jpg" width="175" height="136" alt="Springer Spaniel">
    <p>Our highly qualified <a href="staff.html">staff</a> is committed to the kennel’s mission of providing quality services for all pets.  We offer <a href="hours.html">flexible hours</a> and <a href="rates.html">competitive rates</a> and you can read about what some of our <a href="references.html">satisfied customers</a> have to say.  If you have like further information about our services, please fill out our <a href="inquiries.html">inquiries</a> form.  We also have <a href="links.html">links</a> to other websites of interest to pet owners and <a href="contact.html">a map and directions</a> to our location are available for your convenience.</p>
      </div>
    </div>
    <div class="footerArea">
      <nav class="footerNav"> <a href="index.html">Home</a> | <a href="hours.html">Hours</a> |             <a href="rates.html">Rates</a> | <a href="staff.html">Staff</a> | <a href="inquiries.html">Referances</a> | <a href="links.html">Links</a> | <a     href="inquiries.html">Inquiries</a> | <a     href="contact.html">Contact Us</a></nav>
      <!-- #BeginLibraryItem "/Library/Copyright.lbi" -->
      <p>© Happy Valley Kennel. All Rights Reserved</p>
      <!-- #EndLibraryItem --> </div>
    <p> <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img                 style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" /> </a> </p>
    </body>
    </html>

CSS for Screen

@charset "utf-8";
/* CSS Document */

body {
    background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #66CCCC), color-stop(1, #00FFCC) );
    background-image: -o-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: -moz-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: -webkit-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: -ms-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: linear-gradient(to right bottom, #66CCCC 0%, #00FFCC 100%);
    color: #fff;
    font-family: "Courier New", Courier, sans-serif;
}
h1 {
    text-align: center;
}
a {
    text-decoration: none;
}
#banner {
    margin-top: 1em;
    margin-left: 1em;
    margin-bottom: 1em;
    margin-right: 1em;
    background-color: #099;
    background-image: url(../images/pawprint2.png);
    background-repeat: no-repeat;
    background-position: top right;
    padding: 0.2em;
    font-size: 100%;
    border: 0.5em solid #FFF;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    min-height: 220px;
}
.quote {
    font-style: italic;
    text-align: left;
}
.quotee {
    text-align: right;
}
#logo {
    vertical-align: middle;
}
#paw {
    float: right;
    width: 78px;
    height: 78px;
}
#theo {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -o-border-radius: 2em;
    border-radius: 2em;
    float: right;
    padding: 0.4em;
}
#springer {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -o-border-radius: 2em;
    border-radius: 2em;
    float: left;
    padding: 0.4em;
}
.employeeC1 {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -o-border-radius: 2em;
    border-radius: 2em;
    margin-right: 0.6em;
    float: left;
}
.employeeC2 {
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -o-border-radius: 2em;
    border-radius: 2em;
    margin-left: 0.6em;
    float: right;
}
.MobileHeader {
    display: none;
}
.HeaderAlign {
    display: inline-block;
    text-align: left;
    padding-left: 1.0em;
    font-size: 3.0em;
    text-decoration: none;
    color: white;
    font-family: "Courier New", Courier, sans-serif;
    font-weight: bold;
    vertical-align: middle;
}
#wrapper {
    border: 1em solid #099;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
#navbar {
    float: left;
    border: 0.6em solid #099;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
    background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #66CCCC), color-stop(1, #00FFCC) );
    background-image: -o-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: -moz-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: -webkit-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: -ms-linear-gradient(right bottom, #66CCCC 0%, #00FFCC 100%);
    background-image: linear-gradient(to right bottom, #66CCCC 0%, #00FFCC 100%);
    margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 1em;
    width: 12.0em;
}
#navbar p {
    margin-left: auto;
    margin-right: auto;
    border: 0.3em solid #FFF;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
    margin: 1em;
}
.navlinks {
    margin: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    background-color: #099;
    text-align: center;
    font-family: "Courier New", Courier, sans-serif;
}
.navlinks a {
    text-decoration: none;
    color: #FFF;
    font-weight: bold;
    font-size: 1.1em;
}
.navlinks a:hover {
    text-decoration: none;
    color: #FFF;
    font-size: 1.1em;
    background-color: #6FF;
    padding: 0.15em;
}
.footerArea {
    display: inline;
    list-style-type: none;
    text-align: center;
}
.footerArea p {
    text-align: center;
    color: #FFF;
    font-size: 0.6em;
}
.footerNav a {
    text-decoration: none;
    color: #FFF;
    font-size: 0.8em;
    list-style-type: none;
}
.content {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin: 0.5em;
    margin-left: 0.9em;
    background-color: #099;
    border: 0.2em solid #FFF;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
}
.contentTwo {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 12.6em;
    margin-right: 0;
    margin-bottom: 0.5em;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1.5em;
    -webkit-border-bottom-left-radius: 1.5em;
    -moz-border-radius-topleft: 1.5em;
    -moz-border-radius-bottomleft: 1.5em;
    -o-border-radius-topleft: 1.5em;
    -o-border-radius-bottomleft: 1.5em;
    border-top-left-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
}
.contentThree {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin: 0.5em;
    margin-left: 0.9em;
    background-color: #099;
    border: 0.2em solid #FFF;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
    min-height: 155px;
}
.contentFour {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 12.6em;
    margin-right: 0;
    margin-bottom: 0.5em;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1.5em;
    -webkit-border-bottom-left-radius: 1.5em;
    -moz-border-radius-topleft: 1.5em;
    -moz-border-radius-bottomleft: 1.5em;
    -o-border-radius-topleft: 1.5em;
    -o-border-radius-bottomleft: 1.5em;
    border-top-left-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
    min-height: 155px;
}
.contentFive {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 1.0em;
    margin-right: 0;
    margin-bottom: 0.5em;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1.5em;
    -webkit-border-bottom-left-radius: 1.5em;
    -moz-border-radius-topleft: 1.5em;
    -moz-border-radius-bottomleft: 1.5em;
    -o-border-radius-topleft: 1.5em;
    -o-border-radius-bottomleft: 1.5em;
    border-top-left-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
    min-height: 155px;
}
.contentSix {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 12.6em;
    margin-right: 0;
    margin-bottom: 0.5em;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1.5em;
    -webkit-border-bottom-left-radius: 1.5em;
    -moz-border-radius-topleft: 1.5em;
    -moz-border-radius-bottomleft: 1.5em;
    -o-border-radius-topleft: 1.5em;
    -o-border-radius-bottomleft: 1.5em;
    border-top-left-radius: 1.5em;
    border-bottom-left-radius: 1.5em;
    min-height: 200px;
}
.content h1 {
    font-size: 1.4em;
}
.contentTwo h1 {
    font-size: 1.4em;
}
.contentThree h1 {
    font-size: 1.4em;
}
.contentFour h1 {
    font-size: 1.4em;
}
.contentFive h1 {
    font-size: 1.4em;
}
.contentSix h1 {
    font-size: 1.4em;
}
.content a {
    color: #0FC;
}
.contentTwo a {
    color: #0FC;
}
.contentThree a {
    color: #0FC;
}
.contentFour a {
    color: #0FC;
}
.contentFive a {
    color: #0FC;
}
.contentSix a {
    color: #0FC;
}
table {
    width: 75%;
    font-family: "Courier New", Courier, sans-serif;
    color: #FFF;
    text-align: center;
    padding: 2px;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
}
td, th {
    border: solid 1px white;
}
ul {
    list-style-type: none;
    list-style-image: url('/images/listpaw.gif');
    font-family: "Times New Roman", Times, serif;
}
.listImage {
    list-style-type: none;
    list-style-image: url('/images/listpaw.gif');
}
li {
    list-style-type: none;
    list-style-image: url('/images/listpaw.gif');
}
li a {
    color: #FFF;
}
li a:hover {
    color: #6FF;
}
#mobileNav {
    display: none;
}
#mobileImage {
    display: none;
}
.infoBtn {
    float: left;
}
#addQues {
    resize: none;
}
.lbl {
    margin-right: 1.78em;
}
.lbl1 {
    margin-right: 2.38em;
}
.tbhd {
    text-align: left;
    font-size: 1.0em;
    padding: 0.4em;
}
.tbhd1 {
    font-size: 1.0em;
    text-align: left;
    padding: 0.4em;
}
legend  {color:#FFF;}

fieldset    {padding:5px;}

CSS for Mobile

@charset "utf-8";
/* CSS Document */

body {
    background-image: none;
    background-color: #0FC;
    color: #fff;
    font-family: "Courier New", Courier, sans-serif;
}
h1 {
    text-align: center;
}
a {
    text-decoration: none;
    color: white;
}
.HeaderAlign {
    display: none;
}
.MobileHeader {
    display: inline;
    padding: 0.5em;
}
#banner {
    margin-top: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    margin-right: 0.5em;
    background-color: #099;
    background-image: url(../images/pawprint2.png);
    background-repeat: no-repeat;
    background-position: right;
    background: #6FF;
    padding: 0.15em;
    font-size: 100%;
    border: 0.2em solid #FFF;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    border-radius: 1em;
    min-height: 10px;
}
#paw {
    float: none;
    width: 39px;
    height: 39px;
}
#theo {
    display: none;
}
#springer {
    display: none;
}
#logo {
    display: none;
}
#wrapper {
    border: 0.5em solid #099;
    -webkit-border-radius: 1.0em;
    -moz-border-radius: 1.0em;
    -o-border-radius: 1.0em;
    border-radius: 1.0em;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
#navbar {
    display: none;
}
#navbar p {
    display: none;
}
.navlinks {
    display: none;
}
.navlinks a {
    display: none;
}
.navlinks a:hover {
    display: none;
}
#footer {
    display: inline;
    list-style-type: none;
    text-align: center;
}
.footer a {
    text-decoration: none;
    color: #FFF;
    font-size: 1.0em;
    display: inline;
    list-style-type: none;
}
.footer p {
    color: #FFF;
    font-size: 1.0em;
    display: inline;
    text-align: center;
}
.content {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin: 0.5em;
    margin-left: 0;
    background-color: #099;
    border-right: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    border-left: 0;
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 1em;
    -webkit-border-top-right-radius: 1em;
    border-top-right-radius: 1em;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em;
    border-bottom-right-radius: 1em;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}
.contentTwo {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 0.5em;
    margin-right: 0;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -moz-border-radius-topleft: 1em;
    -moz-border-radius-bottomleft: 1em;
    -o-border-radius-topleft: 1em;
    -o-border-radius-bottomleft: 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}
.contentThree {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin: 0.5em;
    margin-left: 0;
    background-color: #099;
    border-right: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    border-left: 0;
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 1em;
    -webkit-border-top-right-radius: 1em;
    border-top-right-radius: 1em;
    -moz-border-radius-bottomright: 1em;
    -webkit-border-bottom-right-radius: 1em;
    border-bottom-right-radius: 1em;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}
.contentFour {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 0.5em;
    margin-right: 0;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -moz-border-radius-topleft: 1em;
    -moz-border-radius-bottomleft: 1em;
    -o-border-radius-topleft: 1em;
    -o-border-radius-bottomleft: 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}
.contentFive {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 0.5em;
    margin-right: 0;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -moz-border-radius-topleft: 1em;
    -moz-border-radius-bottomleft: 1em;
    -o-border-radius-topleft: 1em;
    -o-border-radius-bottomleft: 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}
.contentSix {
    font-weight: bold;
    padding: 1.0em;
    color: #FFF;
    font-size: 1.2em;
    margin-left: 0.5em;
    margin-right: 0;
    background-color: #099;
    border-left: 0.2em solid #FFF;
    border-top: 0.2em solid #FFF;
    border-bottom: 0.2em solid #FFF;
    -webkit-border-top-left-radius: 1em;
    -webkit-border-bottom-left-radius: 1em;
    -moz-border-radius-topleft: 1em;
    -moz-border-radius-bottomleft: 1em;
    -o-border-radius-topleft: 1em;
    -o-border-radius-bottomleft: 1em;
    border-top-left-radius: 1em;
    border-bottom-left-radius: 1em;
}
.content h1 {
    font-size: 1.4em;
}
.contentTwo h1 {
    font-size: 1.4em;
}
.contentThree h1 {
    font-size: 1.4em;
}
.contentFour h1 {
    font-size: 1.4em;
}
.contentFive h1 {
    font-size: 1.4em;
}
.contentSix h1 {
    font-size: 1.4em;
}
.content a {
    color: #6FF;
}
.contentTwo a {
    color: #6FF;
}
.contentThree a {
    color: #6FF;
}
.contentFour a {
    color: #6FF;
}
.contentFive a {
    color: #6FF;
}
.contentSix a {
    color: #6FF;
}
table {
    width: 75%;
    font-family: "Courier New", Courier, sans-serif;
    color: #FFF;
    text-align: center;
    padding: 2px;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
}
td, th {
    border: solid 1px white;
}
li {
    list-style-image: url("/images/listpaw.png");
    font-family: "Times New Roman", Times, serif;
}
li a {
    color: #FFF;
}
li a:hover {
    color: #6FF;
}
#mobileNav {
    display: inline;
}
#mobileImage {
    display: inline;
    float: left;
    -webkit-border-radius: 1.5em;
    -moz-border-radius: 1.5em;
    -o-border-radius: 1.5em;
    border-radius: 1.5em;
    padding: 0.3em;
}

.tbhd {
    text-align: left;
    font-size: 0.9em;
    padding: 0.3em;
}
.tbhd1 {
    font-size: 0.9em;
    text-align: left;
    padding: 0.3em;
}

#tb2    {width:95%;}

.footerNav  {display:none;}

Sorry for the ridiculous amount of code. I'm not sure what's relavent.

What version of IE are you using? Also, what version of Windows? — Geeky Guy, Dec 05 '13 at 17:22
you could provide a fiddle to avoid the amount of code pasted here ;) — Ria Weyprecht, Dec 05 '13 at 17:25
First step to debugging is to find the smallest amount of code that reproduces the problem. If you still can't figure out why it doesn't work, paste the condensed version here. The more code we have to sift through, the longer it generally takes to get an answer. — cimmanon, Dec 05 '13 at 17:29
@RiaElliger - Nooooo. Fiddles are useful tools to make it easier for us to debug, but shouldn't have any significant data that the question doesn't already have. See [this discussion](http://meta.stackexchange.com/questions/114942/when-jsfiddle-and-other-related-sites-are-gone-so-is-the-information) and many others you can find on meta. — Scott Mermelstein, Dec 05 '13 at 17:32
@DuncanMcKirdy The logo is in a div with id "banner". Are you sure that id isn't blocked somewhere by something? Many adblockers have a tendency to. — Mr Lister, Dec 05 '13 at 17:36
@Scott Mermelstein ok, right :) But then still half the code could have been left out as not relevant to the problem — Ria Weyprecht, Dec 05 '13 at 18:21

score 0 · Answer 1 · answered Dec 05 '13 at 17:32

0

I'm thinking it's your HTML, and I think you may want to use absolute url paths to see if that works for the logo image file and your href's then work your way back to IE friendly syntax if it works.

answered Dec 05 '13 at 17:32

Abernasty

661
2
10
21

The problem with absolute url paths is that I have to submit this to my teacher, we then host it on another computer, so in order for that to work I need to alter the file paths for every computer it goes on. – Duncan McKirdy Dec 05 '13 at 17:54
Also why would it only break the logo image when it displays fine on all the other images? Just tried the slash. Added it to the other images too. Nothing changed :/ – Duncan McKirdy Dec 05 '13 at 18:02
If the content images are okay, then that's very odd and may then have something to do with your CSS in that case. As [this question](http://stackoverflow.com/questions/6541721/ie-doesnt-support-relative-paths-in-the-base-element-when-referencing-css-files) brings to light, you may want to try declaring a base url. Also to be clear, this isn't actually hosted anywhere? – Abernasty Dec 05 '13 at 18:10
Not currently hosted anywhere but going up as of tomorrow. How would I declare a base url? – Duncan McKirdy Dec 05 '13 at 18:16
[This link](http://stackoverflow.com/questions/1889076/is-it-recommended-to-use-the-base-html-tag) has some good explanations on it, and may help you decide if it's appropriate. So have you tried leading slashes? The images besides the logo in your above HTML work? – Abernasty Dec 05 '13 at 18:33
I've tried leading slashes. Every other image works. I have numerous other pages with exactly the same layout, just different content. It's only breaking on my index.html and my links.html – Duncan McKirdy Dec 05 '13 at 18:54

score 0 · Answer 2 · answered Dec 06 '13 at 02:58

0

I made a local copy of your code and tried it, but I don't see any obvious issues. I don't have your logo, but it is not hidden. I posted a screen shot http://chrislovestuff.blob.core.windows.net/scratch/happy-kennel.png

This is the actual page hosted: http://scratch.love2dev.com/stackoverflow/hidden-logo.html

Note: I took out the handheld stylesheet, I don't think that is really valid with today's mobile devices anymore. You will be much better off doing responsive web design with media queries.

You also mentioned you used IE on OSX. IE only runs on Windows. If you have a MAC you should get one of the free Virtual Machines so you can run IE 11 or any version of IE from http://modern.ie. You can also run your site through the site scanner, just paste the URL in the search field on the home page. It will evaluate your page for common mistakes and oversights for modern web pages. There are a lot of other great resources on the site as well.

answered Dec 06 '13 at 02:58

Chris Love

3,740
1
19
16

I have a Mac but it's been bootcamped. I do all my coding on the Windows side. And regardless of whether or not the mobile stylesheet is valid I have to keep it in. Teachers orders. – Duncan McKirdy Dec 06 '13 at 13:07
I figured the teacher told you to do that :) I would recommend you check out using Visual Studio, you can get a free copy from http://asp.net because it has the best HTML editing experience. especially with Web Essentials installed. If that is too much power try WebMatrix, also free and is a lightweight web editor with source control and direct publishing to free azure hosting. – Chris Love Dec 06 '13 at 18:22
I hope those tools can help. Especially web essentials because it is really good at pointing out issues and correcting them for you. – Chris Love Dec 07 '13 at 15:44

Internet Explorer Breaks my links and logo

2 Answers2