4 Replies Latest reply on Jan 19, 2012 8:39 AM by MurraySummers

    Adding template break box model and font

    brgemborys

      I have been working on this one for a few hours now and I can't figure it out. I am working with the HTML5 Boilerplate and recreating the home page for our company. When I do not include the template, the file works fine in IE. But the second I apply a template the whole page becomes broken and the IE box model applies and my font sizing gets messed up.

       

      I have included a link to the files on a testing server, if this is not allowed, let me know and I can put up the code.

       

      Excuse the cupcakes from FlexSlider, I have not yet finished that piece.

       

      Working (no template): http://www.qa.mpay.com/index.asp

       

      Not working (template): http://www.qa.mpay.com/copy.asp

       

       

      Do I just need to rework my entire code so that it is more compliant with the IE Box Model qualifications, ie. div inside of a div with width on one and padding/margin on the other?

        • 1. Re: Adding template break box model and font
          Nancy OShea Adobe Community Professional & MVP

          404. Server not found.

           

          Which version(s) of IE are you testing? 

          Pre-IE9 does not support HTML5 tags without some help from JavaScript.

          http://code.google.com/p/html5shiv/

           

           

           

          Nancy O.

          Alt-Web Design & Publishing

          Web | Graphics | Print | Media  Specialists 

          http://alt-web.com/

          http://twitter.com/altweb

          • 2. Re: Adding template break box model and font
            MurraySummers Level 8

            Do I just need to rework my entire code so that it is more compliant with the IE Box Model qualifications, ie. div inside of a div with width on one and padding/margin on the other?

             

            I have not seen such 'qualifications' as a requirement for building pages.  I believe you are over-generalizing the box model!

             

            As Nancy mentions, the links you have posted do not work.  We would need to see these pages to comment further.

            • 3. Re: Adding template break box model and font
              brgemborys Level 1

              Alright here's the code for the one that's not working. After posting last night, I realized the links were probably only viewable internally.

               

              UPDATE: Just added <html> after <!doctype html> like I've seen you post about in another forum discussion. That seems to have fixed it. Why is that needed? Isn't it the html tag being opened in the line <html class="no-js" lang="en"> What I mean by this, is why does it work fine in other browsers when that is missing, but it messes up with IE?

               

              P.S. I'm starting to blame H5BP for poor documentation, but I'm learning a lot in the process.

               

              TEMPLATE: (without <html>)

              templates>template_page_home_new.dwt

               

              <!doctype html>

              <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

              <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->

              <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->

              <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->

              <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->

              <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

              <head>

                <meta charset="utf-8">

               

                <!-- Use the .htaccess and remove these lines to avoid edge case issues.

                     More info: h5bp.com/b/378 -->

                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

               

              <!-- TemplateBeginEditable name="doctitle" -->

              <title>MPAY Inc.</title>

              <!-- TemplateEndEditable -->

               

              <!-- TemplateBeginEditable name="tags" -->

              <meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>

              <meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing,  timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>

              <!-- TemplateEndEditable -->

               

               

                <!-- Mobile viewport optimized: j.mp/bplateviewport -->

                <meta name="viewport" content="width=device-width,initial-scale=1">

               

                <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

               

                <!-- CSS: implied media=all -->

                <!-- CSS concatenated and minified via ant build script-->

                <link rel="stylesheet" href="../css/style.css">

                <link rel="stylesheet" href="../css/flexslider.css" type="text/css" media="screen" />

                <!-- end CSS-->

               

                  <!-- FlexSlider pieces -->

                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

                  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

               

                <!-- All JavaScript at the bottom, except for Modernizr / Respond.

                     Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries

                     For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->

                <script src="../js/libs/modernizr-2.0.6.min.js"></script>

               

              </head>

               

               

               

               

               

              <body>

               

              <div id="container">

                  <!-- Header Start -->

                 

                <div id="navigation">

                  <div id="logoregion">

                        <div id="logo">

                            <a href="default.asp"><img src="../images/logo.gif" alt="mpay_logo" /></a>

                        </div>

                        <div id="headerlink">

                            <ul>

                                    <li><a href="../client-login.asp"><p class="new">NEW!</p>  <img src="../images/blue_bullet_line.gif" alt=""> Client Login  </a></li>

                                   

                                    <li><a href="contact_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>

                                   

                                    <li><a href="careers.asp"><img src="../images/blue_bullet_line.gif" alt=""> Careers  </a></li>

                                   

                                    <li><a href="about_us.asp"><img src="../images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>

                        </div>

                        <div id="contact">

                        (781) 810-9000<br />

                        <a href="mailto:sales@mpay.com">sales@mpay.com</a>

                        </div>

                    </div>

                    <div id="mainnav">

                        <ul class="navigation-controls">

                                <li><a href="../index.html"><p class="navigation-text">Home</p></a></li>

                                <li><a href="../services.html"><p class="navigation-text">Services</p></a></li>

                                <li><a href="../products.html"><p class="navigation-text">Products</p></a></li>

                                <li><a href="../solutions.html"><p class="navigation-text">Solutions</p></a></li>

                                <li><a href="../support.html"><p class="navigation-text">Client Support</p></a></li>

                                <li class="nav-border-right"><a href="../resources.html"><p class="navigation-text">Resources</p></a></li>

                         </ul>

                    </div>

                 

                  </div> 

                  <!-- Header End -->

                 

                <!-- TemplateBeginEditable name="EditRegionContent" --><!-- TemplateEndEditable -->

               

                  <!-- Footer Start -->

                      <div id="footer">

                        <div id="footercontent">

                            <div id="legal">

                            <a href="../index.html">MPAY Inc.</a>  |  

                            <a href="../legal.html">Legal Notices</a>  |  

                            <a href="../privacy.html">Your Privacy</a>

                            </div>

                            <div id="copyright">

                             <script type="text/javascript">

                    now=new Date();

                    year=now.getFullYear();

                        </script>

                             &copy; Copyright

                             <script type="text/javascript">

                    document.write (year);

                             </script>

                             MPAY, Inc. All Rights Reserved.</div>

                       </div>

                     </div>

               

               

                <!-- Footer End -->

               

                 </div>

              <!-- JavaScript at the bottom for fast page loading -->

               

                <!-- TemplateBeginEditable name="JavaCode" --><!-- TemplateEndEditable -->

               

               

               

                <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->

              <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

              <script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>

               

               

                <!-- scripts concatenated and minified via ant build script-->

                <script defer src="../js/plugins.js"></script>

                <script defer src="../js/script.js"></script>

                <!-- end scripts-->

               

                  <!-- Act-On Analytics Code -->

                   <script type="text/javascript">

                     /* <![CDATA[ */

                     document.write (

                        '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+

                        new Date().getTime()+

                        '&ref='+escape(document.referrer) + '">'

                        );

                     /* ]]> */

                     </script>

                 

                <!-- Google Analytics Code -->

                <script>

                  window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];

                  Modernizr.load({

                    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'

                  });

                </script>

               

               

              </body>

              </html>

               

               

              File it's being applied to:

              copy.asp

               

              <!-- InstanceBegin template="/Templates/template_page_home_new.dwt" codeOutsideHTMLIsLocked="false" --><!doctype html>

              <!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->

              <!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->

              <!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->

              <!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->

              <!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->

              <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

              <head>

                <meta charset="utf-8">

               

                <!-- Use the .htaccess and remove these lines to avoid edge case issues.

                     More info: h5bp.com/b/378 -->

                <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

               

              <!-- InstanceBeginEditable name="doctitle" -->

              <title>MPAY Inc.</title>

              <!-- InstanceEndEditable -->

               

              <!-- InstanceBeginEditable name="tags" -->

              <meta name='description' content='Payroll Software/Services- Business Process Outsourcing, Reseller and Referral Programs for Payroll Providers, Brokers, CPAs, and more offered by MPAY Inc'/>

              <meta name='keywords' content='MPAY, payroll, payentry.com, millennium, millennium payroll, payroll processing, payroll software, online payroll, outsourcing, business process outsourcing,  timekeeping, Boston, MA, Charlotte, NC, work comp, workers comp, SecureView, online tax forms'/>

              <style type="text/css">

              <!--

              .style1 {color: #00274c}

              -->

              </style>

              <!-- InstanceEndEditable -->

               

               

                <!-- Mobile viewport optimized: j.mp/bplateviewport -->

                <meta name="viewport" content="width=device-width,initial-scale=1">

               

                <!-- Place favicon.ico and apple-touch-icon.png in the root directory: mathiasbynens.be/notes/touch-icons -->

               

                <!-- CSS: implied media=all -->

                <!-- CSS concatenated and minified via ant build script-->

                <link rel="stylesheet" href="css/style.css">

                <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />

                <!-- end CSS-->

               

                  <!-- FlexSlider pieces -->

                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

                  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

               

                <!-- All JavaScript at the bottom, except for Modernizr / Respond.

                     Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries

                     For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->

                <script src="js/libs/modernizr-2.0.6.min.js"></script>

               

              </head>

               

               

               

               

               

              <body>

               

              <div id="container">

                  <!-- Header Start -->

                 

                <div id="navigation">

                  <div id="logoregion">

                        <div id="logo">

                            <a href="default.asp"><img src="images/logo.gif" alt="mpay_logo" /></a>

                        </div>

                        <div id="headerlink">

                            <ul>

                                    <li><a href="client-login.asp"><p class="new">NEW!</p>  <img src="images/blue_bullet_line.gif" alt=""> Client Login  </a></li>

                                   

                                    <li><a href="contact_us.asp"><img src="images/blue_bullet_line.gif" alt=""> Contact Us  </a></li>

                                   

                                    <li><a href="careers.asp"><img src="images/blue_bullet_line.gif" alt=""> Careers  </a></li>

                                   

                                    <li><a href="about_us.asp"><img src="images/blue_bullet_line.gif" alt=""> About Us</a></li></ul>

                        </div>

                        <div id="contact">

                        (781) 810-9000<br />

                        <a href="mailto:sales@mpay.com">sales@mpay.com</a>

                        </div>

                    </div>

                    <div id="mainnav">

                        <ul class="navigation-controls">

                                <li><a href="index.html"><p class="navigation-text">Home</p></a></li>

                                <li><a href="services.html"><p class="navigation-text">Services</p></a></li>

                                <li><a href="products.html"><p class="navigation-text">Products</p></a></li>

                                <li><a href="solutions.html"><p class="navigation-text">Solutions</p></a></li>

                                <li><a href="support.html"><p class="navigation-text">Client Support</p></a></li>

                                <li class="nav-border-right"><a href="resources.html"><p class="navigation-text">Resources</p></a></li>

                         </ul>

                    </div>

                 

                  </div> 

                  <!-- Header End -->

                 

                <!-- InstanceBeginEditable name="EditRegionContent" --><!--! start of #container -->

                 

                 

                  <div id="slideshow">

                     

                      <!--=============================

                      Markup for FADE animation

                      =================================-->

                      <div class="flexslider">

                      <ul class="slides">

                         

                          <li>

                              <a href="#"><img src="img/planet_hollywood.jpg" />

                              <div class="flex-caption">

                                  <div id="slideone">

                                      <h2 class="gold" >MPAY Sales &amp; Product <br />Roadmap Workshop</h2><br />

                                      <h3 class="white">

                                      March 2, 2012 / Las Vegas

                                      <br />

                                      </h3>

                                       <br /> <br /> <br />

                                      <p class="gold underline">

                                      Learn more about IPPA Event

                                      </p>

                                  </div>

                              </div></a>

                          </li>

                          <li>

                              <a href="#"><img src="img/inacup_samoa.jpg" />

                              <div class="flex-caption">

                                  <h2 >Our Products</h2><br />

                                  <h3 >Payentry.com

                                  <br />Secure and reliable online solution for payroll and human resource management

                                  Millennium

                                  <br />User-friendly PC solution provides a flexible system with robust functionality

                                  </h3>

                              </div></a>

                          </li>

                          <li>

                              <a href="#"><img src="img/inacup_donut.jpg" />

                              <div class="flex-caption">

                                  <h2 >Our Solutions</h2><br />

                                  <h3 >Business Process Outsourcing<br />

                              Reseller Program<br />

                              Referral Program<br />

                              Direct Services

                                  </h3>

                              </div></a>

                          </li>

                          <li>

                              <a href="#"><img src="img/inacup_pumpkin.jpg" />

                              <div class="flex-caption">

                                  <h2 >Compliance &amp; Security</h2><br />

                                  <h3 >Payroll Processing and Tax Management<br />

                              Employee Management<br />

                              New Hire Reporting<br />

                              Workers’ Compensation<br />

                              Wage Garnishment<br />

                              COBRA Administration

               

                                  </h3>

                              </div></a>

                          </li>

                          <li>

                              <a href="#"><img src="img/inacup_donut.jpg" />

                              <div class="flex-caption">

                                  <h2 >Paperless Solutions</h2><br />

                                  <h3 >Secure Document Delivery via SecureView<br />

                              Employee Self Service with Online Tax Forms<br />

                              Money Network Payroll Distribution Service

                                  </h3>

                              </div></a>

                          </li>

                      </ul>

                      <div >

                      <ul class="custom-controls">

                              <li><a href="#">Upcoming Events</a></li>

                              <li><a href="#">Our Products</a></li>

                              <li><a href="#">Our Solutions</a></li>

                              <li><a href="#">Compliance & Security</a></li>

                              <li><a href="#">Paperless Solutions</a></li>

                       </ul>

                       </div>           

                    </div>

                  </div>

                 

                  <div id="main" role="main">

                 

               

                   

                   

                

                   

                      <div id="banner">

                        <div id="leftbanner" class="bluedropshadow">Learn how MPAY can find a <br />solution that’s right for you.</div>

                        <div id="bannerdivision">

                        <img src="img/banner_division.png" alt="" />

                        </div>

                        <div id="rightbanner">

                          <div id="emailbutton">

                          <a href="#"><img src="img/email_us_button.png" alt="Email Us!" /></a></div>

                          <div id="or" class="bluedropshadow">or</div>

                          <div id="callus">

                          Call us today at<br />

                          781-810-9000</div>

                        </div>

                       

                      </div>

                    <div id="bannerbottom">

                        </div>

                       

                       

                      <div id="leftcol">

                        <div id="introduction">

                        <p>MPAY Inc. is a <a href="#">payroll software</a> and <a href="#">services</a> company providing strategic <a href="#">business solutions</a> to employers and business partners nationwide. MPAY presents a variety of programs, including <a href="#">business process outsourcing</a>, to a wide range of <a href="#">industries</a>. MPAY’s offerings streamline processes, improve productivity, and simplify administration, allowing clients to get the most out of their workday.</p>

                        </div>

                        <div id="twitterfeed">

                            <div id="twitterlogo">

                            <h4>Twitter<br />Feed</h4>

                            </div>

                            <div id="twitter">  

                            </div>

                          <p class="viewall"><a href="#">View All</a></p>

                        </div>

                      </div>

                      <div id="rightcol">

                        <div id="mediacenter">

                          <div>

                          <h4>Media Center</h4>

                          </div>

                          <div id="medialinks">

                          <p class="medialinks"><a href="#"><img class="mediaicons" src="img/news_icon.png" alt="News Icon" />News</a></p>

                          <p class="medialinks"><a href="#"><img class="mediaicons" src="img/press_icon.png" alt="Press Release Icon" />Press Releases</a></p>

                          <p class="medialinks"><a href="#"><img class="mediaicons" src="img/calendar_icon.png" alt="Calendar Icon" />Calendar</a></p>

                          <p class="medialinks"><a href="#"><img class="mediaicons" src="img/client_icon.png" alt="Client Testimonials Icon" />Client Testimonials</a></p>

                          </div>

                        </div>

                        <div id="affandawards">

                          <div id="affandawardstitle">

                          <h4>Affiliates &amp; Awards</h4>

                          </div>

                          <div id="affandawardsframe">

                            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="200" height="150" title="sponsors_small">

                              <param name="movie" value="sponsors_small.swf">

                              <param name="quality" value="high">

                              <embed src="sponsors_small.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="200" height="150"></embed>

                            </object>

                          </div>

                        </div>

                        <div id="socialmedia">

                          <div id="reachout">

                          Reach <br />Out To Us!

                          </div>

                          <div id="socialarrow">

                          <img src="img/social_arrow.gif">

                          </div>

                          <div id="socialicons">

                          <a href="#"><img class="socialmediaicons" src="img/facebook_30px.gif" alt="Facebook Icon" /></a>

                          <a href="#"><img class="socialmediaicons" src="img/twitter_30px.gif" alt="Twitter Icon" /></a>

                          <a href="#"><img class="socialmediaicons" src="img/linkedin_30px.gif" alt="LinkedIn Icon" /></a>

                          </div>

                        </div>

                      </div>

                   

                  </div>

               

              <!--! end of #container -->

               

              <!-- InstanceEndEditable -->

               

                  <!-- Footer Start -->

                      <div id="footer">

                        <div id="footercontent">

                            <div id="legal">

                            <a href="index.html">MPAY Inc.</a>  |  

                            <a href="legal.html">Legal Notices</a>  |  

                            <a href="privacy.html">Your Privacy</a>

                            </div>

                            <div id="copyright">

                             <script type="text/javascript">

                    now=new Date();

                    year=now.getFullYear();

                        </script>

                             &copy; Copyright

                             <script type="text/javascript">

                    document.write (year);

                             </script>

                             MPAY, Inc. All Rights Reserved.</div>

                       </div>

                     </div>

               

               

                <!-- Footer End -->

               

                 </div>

              <!-- JavaScript at the bottom for fast page loading -->

               

                <!-- InstanceBeginEditable name="JavaCode" -->

               

                      <!-- Hook up the FlexSlider -->

                  <script type="text/javascript">

                      $(window).load(function() {

                          $('.flexslider').flexslider({

                              manualControls: '.custom-controls li a'

                          });

                      });

                  </script>

                 

                  <!-- Twitter Feed -->

              <script type="text/javascript">

              $(document).ready(function(){

               

               

                 

                  $.getJSON('http://twitter.com/status/user_timeline/MPAYInc.json?count=3&callback=?', function(data){

                      $.each(data, function(index, item){

                          $('#twitter').append('<div class="tweet"><p>' + item.text.linkify() + '</p><p class="timestamp">' + relative_time(item.created_at) + '</p></div>');

                      });

                 

                  });

                 

               

                 

                  function relative_time(time_value) {

                    var values = time_value.split(" ");

                    time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];

                    var parsed_date = Date.parse(time_value);

                    var relative_to = (arguments.length > 1) ? arguments[1] : new Date();

                    var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);

                    delta = delta + (relative_to.getTimezoneOffset() * 60);

                   

                    var r = '';

                    if (delta < 60) {

                      r = 'a minute ago';

                    } else if(delta < 120) {

                      r = 'couple of minutes ago';

                    } else if(delta < (45*60)) {

                      r = (parseInt(delta / 60)).toString() + ' minutes ago';

                    } else if(delta < (90*60)) {

                      r = 'an hour ago';

                    } else if(delta < (24*60*60)) {

                      r = '' + (parseInt(delta / 3600)).toString() + ' hours ago';

                    } else if(delta < (48*60*60)) {

                      r = '1 day ago';

                    } else {

                      r = (parseInt(delta / 86400)).toString() + ' days ago';

                    }

                   

                    return r;

                  }

                 

                  String.prototype.linkify = function() {

                      return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m) {

                          return m.link(m);

                      });

                  };

               

              });

              </script><!-- InstanceEndEditable -->

               

               

               

                <!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->

              <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

              <script>window.jQuery || document.write('<script src="../js/libs/jquery-1.6.2.min.js"><\/script>')</script>

               

               

                <!-- scripts concatenated and minified via ant build script-->

                <script defer src="js/plugins.js"></script>

                <script defer src="js/script.js"></script>

                <!-- end scripts-->

               

                  <!-- Act-On Analytics Code -->

                   <script type="text/javascript">

                     /* <![CDATA[ */

                     document.write (

                        '<img src="http://marketing.mpay.com/acton/bn/1170/visitor.gif?ts='+

                        new Date().getTime()+

                        '&ref='+escape(document.referrer) + '">'

                        );

                     /* ]]> */

                     </script>

                 

                <!-- Google Analytics Code -->

                <script>

                  window._gaq = [['_setAccount','UA-12607129-1'],['_trackPageview'],['_trackPageLoadTime']];

                  Modernizr.load({

                    load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'

                  });

                </script>

               

               

              </body>

              <!-- InstanceEnd --></html>

               

               

               

               

              CSS

              css>style.css

               

              /*

              * HTML5 ✰ Boilerplate

              *

              * What follows is the result of much research on cross-browser styling.

              * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,

              * Kroc Camen, and the H5BP dev community and team.

              *

              * Detailed information about this CSS: h5bp.com/css

              *

              * ==|== normalize ==========================================================

              */

               

               

              /* =============================================================================

                 HTML5 display definitions

                 ========================================================================== */

               

              article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }

              audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }

              audio:not([controls]) { display: none; }

              [hidden] { display: none; }

               

              /* =============================================================================

                 Base

                 ========================================================================== */

               

              /*

              * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units

              * 2. Force vertical scrollbar in non-IE

              * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g

              */

               

              html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

               

              body { margin: 0; font-size: 100%; line-height: 150%; }

               

              body, button, input, select, textarea { font-family: sans-serif; color: #222; }

               

              /*

              * Remove text-shadow in selection highlight: h5bp.com/i

              * These selection declarations have to be separate

              * Also: hot pink! (or customize the background color to match your design)

              */

               

              ::-moz-selection { background: #496793; color: #fff; text-shadow: none; }

              ::selection { background: #496793; color: #fff; text-shadow: none; }

               

               

              /* =============================================================================

                 Links

                 ========================================================================== */

               

              a { color: #00e; }

              a:visited { color: #551a8b; }

              a:hover { color: #06e; }

              a:focus { outline: thin dotted; }

               

              /* Improve readability when focused and hovered in all browsers: h5bp.com/h */

              a:hover, a:active { outline: 0; }

               

               

              /* =============================================================================

                 Typography

                 ========================================================================== */

               

              abbr[title] { border-bottom: 1px dotted; }

               

              b, strong { font-weight: bold; }

               

              blockquote { margin: 1em 40px; }

               

              dfn { font-style: italic; }

               

              hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

               

              ins { background: #ff9; color: #000; text-decoration: none; }

               

              mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }

               

              /* Redeclare monospace font family: h5bp.com/j */

              pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }

               

              /* Improve readability of pre-formatted text in all browsers */

              pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }

               

              q { quotes: none; }

              q:before, q:after { content: ""; content: none; }

               

              small { font-size: 85%; }

               

              /* Position subscript and superscript content without affecting line-height: h5bp.com/k */

              sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

              sup { top: -0.5em; }

              sub { bottom: -0.25em; }

               

               

              /* =============================================================================

                 Lists

                 ========================================================================== */

               

              ul, ol { margin: 0em 0; padding: 0 0 0 0px; }

              dd { margin: 0 0 0 40px; }

              nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }

               

               

              /* =============================================================================

                 Embedded content

                 ========================================================================== */

               

              /*

              * 1. Improve image quality when scaled in IE7: h5bp.com/d

              * 2. Remove the gap between images and borders on image containers: h5bp.com/e

              */

               

              img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }

               

              /*

              * Correct overflow not hidden in IE9

              */

               

              svg:not(:root) { overflow: hidden; }

               

               

              /* =============================================================================

                 Figures

                 ========================================================================== */

               

              figure { margin: 0; }

               

               

              /* =============================================================================

                 Forms

                 ========================================================================== */

               

              form { margin: 0; }

              fieldset { border: 0; margin: 0; padding: 0; }

               

              /* Indicate that 'label' will shift focus to the associated form element */

              label { cursor: pointer; }

               

              /*

              * 1. Correct color not inheriting in IE6/7/8/9

              * 2. Correct alignment displayed oddly in IE6/7

              */

               

              legend { border: 0; *margin-left: -7px; padding: 0; }

               

              /*

              * 1. Correct font-size not inheriting in all browsers

              * 2. Remove margins in FF3/4 S5 Chrome

              * 3. Define consistent vertical alignment display in all browsers

              */

               

              button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }

               

              /*

              * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)

              * 2. Correct inner spacing displayed oddly in IE6/7

              */

               

              button, input { line-height: normal; *overflow: visible; }

               

              /*

              * Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7

              */

               

              table button, table input { *overflow: auto; }

               

              /*

              * 1. Display hand cursor for clickable form elements

              * 2. Allow styling of clickable form elements in iOS

              */

               

              button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }

               

              /*

              * Consistent box sizing and appearance

              */

               

              input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }

              input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }

              input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

               

              /*

              * Remove inner padding and border in FF3/4: h5bp.com/l

              */

               

              button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

               

              /*

              * 1. Remove default vertical scrollbar in IE6/7/8/9

              * 2. Allow only vertical resizing

              */

               

              textarea { overflow: auto; vertical-align: top; resize: vertical; }

               

              /* Colors for form validity */

              input:valid, textarea:valid {  }

              input:invalid, textarea:invalid { background-color: #f0dddd; }

               

               

              /* =============================================================================

                 Tables

                 ========================================================================== */

               

              table { border-collapse: collapse; border-spacing: 0; }

              td { vertical-align: top; }

               

               

              /* =============================================================================

                 Eric Meyer Reset Snippet

                 ========================================================================== */

               

              /* http://meyerweb.com/eric/tools/css/reset/ */

              /* v1.0 | 20080212 */

               

              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, font, 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 {

                  margin: 0;

                  padding: 0;

                  border: 0;

                  outline: 0;

                  font-size: 100%;

                  vertical-align: baseline;

                  background: transparent;   

              }

               

               

               

               

              /* ==|== primary styles =====================================================

                 Author:

                 ========================================================================== */

               

              body {

                  max-width: 49.6875em;

                  text-align: center;

                  margin: auto;

                  }

                 

                  #container{

                  text-align: left;

                  margin: auto;

                  }

                 

              a {

                      color: #6699CC;

                      text-align:left;

                      text-decoration:underline;

                      border: none;   

                  }

                 

                  a:link { color: #6699CC;}

                  a:visited { color: #6699CC;}   

                  a:hover { color: #496793;}   

                  a:active { color: #496793;}

                 

                 

               

              /* ==|== text styles ====================================================== */

               

              p{

                  color:#444444;

                  font-family:Verdana, sans-serif;

              }

               

              h2{

                  font-size:2.5em;

                  line-height:1.25em;

                  letter-spacing:.02em;

                  color:#00274c;

                  font-weight:bold;

                  font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   

              }

               

              h3{

                  font-size:1.5em;

                  line-height:1.25em;

                  letter-spacing:.02em;

                  color:#00274c;

                  font-weight:bold;

                  font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   

              }

               

              h4{

                  font-size:1.3125em;

                  line-height:1.25em;

                  letter-spacing:.02em;

                  color:#00274c;

                  font-weight:normal;

                  font-family:Verdana, sans-serif;   

              }

               

              h5{

                  font-size:1.3125em;

                  line-height:1.25em;

                  letter-spacing:.02em;

                  color:#00274c;

                  font-weight: bold;

                  font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   

              }

               

              /* ==|== navigation styles ====================================================== */

               

              /* Custom Nav */

               

              #navigation{

                  margin:10px 20px 5px 20px;

                  width:775px;

              }

              #headerlink a:link { color: #666;}

              #headerlink a:visited { color: #666;}   

              #headerlink a:hover { color: #00274C;}   

              #headerlink a:active { color: #00274C;}   

              #headerlink li{

                  font: .625em "Arial Narrow", sans-serif;

                  display: inline;

                  text-decoration: none;

                  list-style-image:url(../images/blue_bullet.gif);

                  letter-spacing:.08em;

              }

               

              #headerlink a{

                  text-decoration: none;

              }

               

              #headerlink {

                  padding: 2px 135px 0px 0px;

                  float: right;

              }

               

              .new {

                  text-align:right;

                  font: bold 1.175em "Arial Narrow", sans-serif;

                  color:#8f9d4e;

                  display:inline;

              }

              #header {

                  margin: 15px auto 0 auto;

                  width:775px;

                 

              }

              #logoregion {

                  width:775px;

                  height: 91px;

                  background:url(../images/header_small.gif) no-repeat 0 0;

              }

               

              #contact{

                  font: bold .75em/1.35em sans-serif;

                  color: #919194;

                  padding: 10px 135px 0 0px;

                  float: right;

                  text-align:right;

              }

               

               

              .nav-border-right{

                  border-right: 1px solid #6699cc;

              }

               

              #logo {

                  padding: 32px 0 0px 8px;

                  float: left;

              }

               

              #mainnav {

                  width: 100%; width: 775px;

                  height: 28px;

              }

               

              .navigation-text{

                  text-align: center;

                  font-weight:bold;

                  font-size:.75em;

                  font-family: sans-serif;

                  letter-spacing:.01em;

                  padding-top:2px;}

               

              .navigation-controls {width: 100%;}

              .navigation-controls li {margin: 0 0 0 0px; float:left; display: inline-block; zoom: 1; *display: inline; list-style:none;}

              .navigation-controls li:first-child {margin: 0;}

              .navigation-controls li a {color: #00274c; text-align:center; width: 129px; height: 28px; display: block; background: url(../img/main_navigation_tab.gif) no-repeat 0 0; cursor: pointer; text-decoration:none;}

              .navigation-controls li a:hover {background-position: 0 -28px; color: #00274c; }

              .navigation-controls li a.active {background-position: 0 -28px; color: #00274c;  cursor: default; }

               

              #nav a:link { color: #000000;}

              #nav a:visited { color: #00274C;}   

              #nav a:hover { color: #919194;}   

              #nav a:active { color: #919194;}   

              #nav li{

                  list-style-type: none;

                  display: inline;

              }

              div#nav a{

              float: left;

              text-decoration:none;

              padding-top: 2px;

              padding-right: 15px;

              }

               

               

               

               

              /* ==|== slideshow styles ====================================================== */

               

              #slideshow {width: 100%; width: 775px; margin: 0 16px; }

               

              #slideone{

                  width:60%;}

               

              .gold{

                  color:#d79b00;}

                 

              .white{

                  color:#fff;}

                 

              .underline{

                  text-decoration:underline;}

                 

                 

               

              /* ==|== main styles =========================================================== */

               

               

               

              /* ==|== main content column styles ======================================================= */

               

              #main{

                  background:url(../img/body_bg.jpg) no-repeat 0 0;

                  width: 775px;

                  height: 885px;

                  display:inline-block;

                  margin-top: 90px;

                  padding: 30px 20px 0px 20px;

                  }

                 

              /*

                  background:url(../img/body_bg.jpg) no-repeat 0 0;

                  width: 795px;

                  display:inline-block;

                  margin-top: 90px;

                  padding: 30px 0px 0px 0px;

                  }

                 

              #maincontent{

                  height: 885px;

                  padding: 0px 20px;

                  }

              */

               

              /* ==|== banner styles ====================================================== */

               

              #banner{

                  font-size:1.3125em;

                  line-height:1.25em;

                  letter-spacing:.02em;

                  font-weight: bold;

                  font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;

                  height: 70px;

                  width: 755px;

                  margin: 0px 0px 0px -10px;

                  padding: 0px 20px 20px 20px;

                  -moz-border-radius-topleft: 2px;

                  -moz-border-radius-topright: 2px;

                  -webkit-border-top-left-radius: 2px;

                  -webkit-border-top-right-radius: 2px;

                  border-top-left-radius: 2px;

                  border-top-right-radius: 2px;

                  -khtml-border-top-left-radius: 2px;

                  -khtml-border-top-right-radius: 2px;

                  background-color: #496793;

                  background-image: url(../img/banner_bg.gif);

                  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#496793), to(#2c5079));

                  background-image: -webkit-linear-gradient(top, #496793, #2c5079);

                  background-image:    -moz-linear-gradient(top, #496793, #2c5079);

                  background-image:     -ms-linear-gradient(top, #496793, #2c5079);

                  background-image:      -o-linear-gradient(top, #496793, #2c5079);

               

                  }

               

              #leftbanner{

                  float: left;

                  padding-top:20px;}

                 

              .bluedropshadow {

                  color:#00274c;

                  text-align:left;

                  text-shadow: 1px 1px 1px #6882a4;}

                 

              #bannerdivision{

                  float: left;

                  padding: 16px 20px 0 30px;}

               

              #rightbanner{

                  float: right;

                  padding-top:20px;

                  }

               

              #emailbutton{

                  float: left;

                  padding: 5px 0px 0px 0px;

                  }

               

              #or{

                  float: left;

                  padding: 13px 25px 10px 20px;}

                 

              #callus{

                  color:#ffffff;

                  width: 180px;

                  text-align:right;

                  text-shadow: 1px 1px 1px #00274c;

                  float: right;}

               

              #bannerbottom{

                  height: 20px;

                  background:url(../img/banner_bottom.jpg) no-repeat 0 0;

                  width: 795px;

                  margin: 0px 0px 0px -10px;

              }

               

              /* ==|== left column styles ======================================================= */

               

              #leftcol{

                  float: left;

                  width: 485px;

                  }

                 

              #introduction{

                  padding: 15px;

                  margin: 10px 30px 30px 30px;

                  width: 390px;

                  background-color:#FFFFFF;

                  border: 1px solid #ededed;}

               

              #twitterfeed{

                  text-align:right;

                  margin: 30px;

                  width: 415px;

              }

                 

              #twitterlogo{

                  text-align:left;

                  padding:37px 0 0 160px;

                  height: 78px;

                  background:url(../img/mpay_twitter_bird.png) no-repeat 0 0;

                  }

                 

              .tweet {

                  padding: 1px 0px 1px 0px;

                  margin: 7px 0;

                  text-align:left;

                  font-family: Verdana, sans-serif;

                  font-size:.75em;

                  line-height:1.75em;

              }

               

               

              .timestamp {

                  text-align:right;

                  font-weight: normal;

                  color:#8f9d4e;

              }

               

              .viewall {

                  padding: 12px 0 0 0;

              }

               

              /* ==|== right column styles ====================================================== */

               

              #rightcol{

                  float: right;

                  width: 290px;

                  }

               

              #mediacenter{

                  margin: 10px 30px 50px 30px;

              }

               

              #medialinks{

                  padding: 10px 0 0 0;

              }

               

              .mediaicons{

                  vertical-align:middle;

                  padding: 0px 10px 0 0;

              }

               

              .medialinks{

                  vertical-align:middle;

                  padding: 10px 0 0 0;

              }

               

              #viewall {

                  padding: 12px 0 0 0;

              }

               

              #affandawards{

                  margin: 50px 5px 23px 14px;

              }

               

              #affandawardstitle{

                  margin: 0px 25px 0px 16px;

              }

                 

              #affandawardsframe{

                  margin: 20px 0 0 0;

                  padding: 27px 40px 50px 29px;

                  background:url(../img/flash_bg.png) no-repeat 0 0;

              }

               

               

              #socialmedia{

                  margin: 23px 30px 30px 30px;

              }

               

              #reachout{

                  float:left;

                  font-size:1.875em;

                  line-height:1.25em;

                  color:#8f9d4e;

                  font-weight:bold;

                  font-family:Avant Garde Gothic, ITC Avant Garde Gothic, AvantGarde Md BT, AvantGarde Bk BT, Avant Garde, Century Gothic, Arial, sans-serif;   

              }

               

              #socialarrow{

                  float: right;

                  padding: 20px 0 0 0;

                  }

                 

              #socialicons{

                  float: left;

                  padding: 15px 0 0 0;

                  }

                 

              .socialmediaicons{

                  padding: 0 5px 0 0;

                  }

                 

                 

                 

              /* ==|== footer styles ====================================================== */

               

              #footer{

                  width:775px;

                  font: .75em/1.35em sans-serif;

                  color: #fff;

                  margin: 0px 20px 10px 20px;

                  padding:10px 0px 10px 0px;

                  background:url(../img/footer.gif) no-repeat 0 0;

                  }

                 

              #footercontent{

                  height:20px;

                  padding:0px 30px 0px 30px;

                  }

                 

              #legal{

                  float:left;}

               

              #copyright{

                  text-align:right;

                  float:right;}

               

              /* ==|== non-semantic helper classes ========================================

                 Please define your styles before this section.

                 ========================================================================== */

               

              /* For image replacement */

              .ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }

              .ir br { display: none; }

               

              /* Hide from both screenreaders and browsers: h5bp.com/u */

              .hidden { display: none !important; visibility: hidden; }

               

              /* Hide only visually, but have it available for screenreaders: h5bp.com/v */

              .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

               

              /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */

              .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

               

              /* Hide visually and from screenreaders, but maintain layout */

              .invisible { visibility: hidden; }

               

              /* Contain floats: h5bp.com/q */

              .clearfix:before, .clearfix:after { content: ""; display: table; }

              .clearfix:after { clear: both; }

              .clearfix { zoom: 1; }

               

               

               

              /* ==|== media queries ======================================================

                 PLACEHOLDER Media Queries for Responsive Design.

                 These override the primary ('mobile first') styles

                 Modify as content requires.

                 ========================================================================== */

               

              @media only screen and (min-width: 480px) {

                /* Style adjustments for viewports 480px and over go here */

               

              }

               

              @media only screen and (min-width: 768px) {

                /* Style adjustments for viewports 768px and over go here */

               

              }

               

               

               

              /* ==|== print styles =======================================================

                 Print styles.

                 Inlined to avoid required HTTP connection: h5bp.com/r

                 ========================================================================== */

               

              @media print {

                * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */

                a, a:visited { text-decoration: underline; }

                a[href]:after { content: " (" attr(href) ")"; }

                abbr[title]:after { content: " (" attr(title) ")"; }

                .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */

                pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

                thead { display: table-header-group; } /* h5bp.com/t */

                tr, img { page-break-inside: avoid; }

                img { max-width: 100% !important; }

                @page { margin: 0.5cm; }

                p, h2, h3 { orphans: 3; widows: 3; }

                h2, h3 { page-break-after: avoid; }

              }

               

               

               

              CSS

              css>flexslider.css

               

              /*

              * jQuery FlexSlider v1.8

              * http://flex.madebymufffin.com

              *

              * Copyright 2011, Tyler Smith

              * Free to use under the MIT license.

              * http://www.opensource.org/licenses/mit-license.php

              */

               

              /* Browser Resets */

              .flex-container a:active,

              .flexslider a:active {outline: none;}

              .slides,

              .flex-control-nav,

              .flex-direction-nav {margin: 0; padding: 0; list-style: none;}

               

              /* FlexSlider Necessary Styles

              *********************************/

              .flexslider {width: 100%; margin: 0; padding: 0;}

              .flexslider .slides > li {display: none;} /* Hide the slides before the JS is loaded. Avoids image jumping */

              .flexslider .slides img {max-width: 100%; display: block;}

              .flex-pauseplay span {text-transform: capitalize;}

               

              /* Clearfix for the .slides element */

              .slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}

              html[xmlns] .slides {display: block;}

              * html .slides {height: 1%;}

               

              /* No JavaScript Fallback */

              /* If you are not using another script, such as Modernizr, make sure you

              * include js that eliminates this class on page load */

              .no-js .slides > li:first-child {display: block;}

               

               

              /* FlexSlider Default Theme

              *********************************/

              .flexslider {background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}

              .flexslider .slides {zoom: 1;}

              .flexslider .slides > li {position: relative;}

              /* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */

              .flex-container {zoom: 1; position: relative;}

               

              /* Caption style */

              /* IE rgba() hack */

              .flex-caption {background:none; zoom: 1;}

              .flex-caption {width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; height:92%;}

               

              /* Direction Nav */

              .flex-direction-nav li a {width: 52px; height: 52px; margin: -13px 0 0; display: block; background:url(../img/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; cursor: pointer; text-indent: -9999px;}

              .flex-direction-nav li .next {background-position: -52px 0; right: -21px;}

              .flex-direction-nav li .prev {left: -20px;}

              .flex-direction-nav li .disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}

               

               

               

                     

              /* Custom Nav */

              .custom-controls {width: 100%; position: absolute; bottom: -55px; text-align: center; font-weight:bold; font-size:13px; font-family: sans-serif;}

              .custom-controls li {margin: 0 0 0 0px; float:left; display: inline-block; zoom: 1; *display: inline; list-style:none;}

              .custom-controls li:first-child {margin: 0;}

              .custom-controls li a {color: #ffffff; text-align:center; padding: 20px 0 0 0px; width: 155px; height: 50px; display: block; background: url(../img/slideshow_tab.png) no-repeat 0 0; cursor: pointer;}

              .custom-controls li a:hover {background-position: 0 -70px; color: #ffffff; text-decoration:none;}

              .custom-controls li a.active {background-position: 0 -140px; color: #ffffff;  cursor: default; text-decoration:none;}

               

              #slideshow-navigation{

                  width:775px;

                  height: 70px;

                  background-image:url(../img/slideshow_tabs.jpg);

              }

              • 4. Re: Adding template break box model and font
                MurraySummers Level 8

                UPDATE: Just added <html> after <!doctype html> like I've seen you post about in another forum discussion. That seems to have fixed it. Why is that needed? Isn't it the html tag being opened in the line <html class="no-js" lang="en"> What I mean by this, is why does it work fine in other browsers when that is missing, but it messes up with IE?

                 

                Note that the line you quote -

                 

                <!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

                 

                appears to have some anomalies (in bold red).  Looks like someone has tried to comment that line out.

                 

                Personally, I think that whole block of conditional comments is part of the problem.  What happens if you remove it all and just substitute an ordinary <html> tag?