Fixed bugs in IE8

main.html

@@ -16,6 +16,10 @@
   <script type="text/javascript" src="/static/js/schematic.js"></script>
   <script type="text/javascript" src="/static/js/cktsim.js"></script>
 
+  <!--[if lt IE 9]>
+  <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+  <![endif]-->
+
   <!-- Warning: Do not upgrade FancyBox. V2.0 is under a non-free CC license -->
   <script type="text/javascript" src="/static/lib/fancybox/jquery.fancybox-1.3.4.js"></script>
   <link rel="stylesheet" href="/static/lib/fancybox/jquery.fancybox-1.3.4.css">

marketing.html

@@ -15,9 +15,13 @@
   <script type="text/javascript" src="/static/lib//swfobject/swfobject.js"></script>
   <script type="text/javascript" src="/static/lib/jquery.treeview.js"></script>
   <script type="text/javascript" src="/static/js/video_player.js"></script>
-  <script type="text/javascript" src="/static/js/schematic.js"></script>
+  <!-- <script type="text/javascript" src="/static/js/schematic.js"></script> -->
 
-  <script>
+<!--[if lt IE 9]>
+<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+<![endif]-->
+
+<script>
     $(function() {
         // Set up FancyBox pop-ups
         $("a.modal").fancybox({

sass/_index.scss

@@ -140,20 +140,21 @@ body {
 }
 
 header.announcement {
-  @include background-size(cover);
+  // @include background-size(cover);
   background: #333;
   border-bottom: 1px solid #000;
   color: #fff;
   -webkit-font-smoothing: antialiased;
 
   &.home {
+    background: #e3e3e3 url("/static/images/marketing/shot-1-medium.jpg");
+
     @media screen and (min-width: 1200px) {
       background: #e3e3e3 url("/static/images/marketing/shot-1-large.jpg");
     }
 
-    @media screen and (max-width: 1199px) {
-      background: #e3e3e3 url("/static/images/marketing/shot-1-medium.jpg");
-    }
+    // @media screen and (max-width: 1199px) {
+    // }
 
     div {
       padding: lh(10) lh() lh(3);
@@ -161,6 +162,7 @@ header.announcement {
   }
 
   &.course {
+    background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
 
     @media screen and (min-width: 1200px) {
       background: #e3e3e3 url("/static/images/marketing/course-bg-large.jpg");
@@ -168,12 +170,6 @@ header.announcement {
 
     @media screen and (max-width: 1199px) and (min-width: 700px) {
       background: #e3e3e3 url("/static/images/marketing/course-bg-medium.jpg");
-      @include background-size(cover);
-    }
-
-    @media screen and (max-width: 699px) {
-      background: #e3e3e3 url("/static/images/marketing/course-bg-small.jpg");
-      @include background-size(cover);
     }
 
     div {
@@ -190,6 +186,7 @@ header.announcement {
       top: 0;
       right: lh();
       @include border-radius(0 0 3px 3px);
+      background: #333;
       background: rgba(#000, .7);
       padding: lh(.5);
 
@@ -334,6 +331,7 @@ section.index-content {
 
           p {
             width: auto;
+            clear: both;
 
             strong {
               font-family: "Open sans";

sass/_reset.scss

-html, body, div, span, applet, object, iframe,
+/* 
+html5doctor.com Reset Stylesheet
+v1.6.1
+Last Updated: 2010-09-17
+Author: Richard Clark - http://richclarkdesign.com 
+Twitter: @rich_clark
+*/
+
+html, body, div, span, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, font, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
+abbr, address, cite, code,
+del, dfn, em, img, ins, kbd, q, samp,
+small, strong, sub, sup, var,
+b, i,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  outline: 0;
-  font-weight: inherit;
-  font-style: inherit;
-  font-size: 100%;
-  font-family: inherit;
-  vertical-align: baseline;
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, summary,
+time, mark, audio, video {
+    margin:0;
+    padding:0;
+    border:0;
+    outline:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
 }
 
 body {
-  line-height: 1;
-  color: black;
-  background: white;
+    line-height:1;
 }
 
-table {
-  border-collapse: separate;
-  border-spacing: 0;
+article,aside,details,figcaption,figure,
+footer,header,hgroup,menu,nav,section { 
+    display:block;
+}
+
+nav ul {
+    list-style:none;
 }
-caption, th, td {
-  text-align: left;
-  font-weight: normal;
+
+blockquote, q {
+    quotes:none;
 }
 
 blockquote:before, blockquote:after,
 q:before, q:after {
-  content: "";
+    content:'';
+    content:none;
 }
 
-blockquote, q {
-  quotes: "" "";
+a {
+    margin:0;
+    padding:0;
+    font-size:100%;
+    vertical-align:baseline;
+    background:transparent;
+}
+
+/* change colours to suit your needs */
+ins {
+    background-color:#ff9;
+    color:#000;
+    text-decoration:none;
+}
+
+/* change colours to suit your needs */
+mark {
+    background-color:#ff9;
+    color:#000; 
+    font-style:italic;
+    font-weight:bold;
 }
 
+del {
+    text-decoration: line-through;
+}
+
+abbr[title], dfn[title] {
+    border-bottom:1px dotted;
+    cursor:help;
+}
+
+table {
+    border-collapse:collapse;
+    border-spacing:0;
+}
+
+/* change border colour to suit your needs */
+hr {
+    display:block;
+    height:1px;
+    border:0;   
+    border-top:1px solid #cccccc;
+    margin:1em 0;
+    padding:0;
+}
+
+input, select {
+    vertical-align:middle;
+}