2 Replies Latest reply on Jul 18, 2012 10:41 AM by dhosford

    Media queries IE8

    smitchell1547 Level 1

      Hi

       

      If anybody could help me i would be greatly appreciated.

       

      I have created a site that is working well which is here http://smitchells.co.uk/sql/index.html

      All is working well on modern browsers and tablets and phone but not in IE8 or below.

       

      I have read that IE8 doesnt not support media queries nd i need to add this code:

      <! -- (if lt IE9)>

      <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script>

      <! (endif) -->

      //but that didnt work either!

       

      I then created a test page(http://smitchells.co.uk/sql/sean.html) without media queries but still get the same incorrectly formatted html page. So I have come to the conclusion that it is the way i have written the html and the CSS. Can anybody steer me in the right direction. If you could then it would be greatly appreciated as its driving me bonkers!

       

      Thanks again

       

      Below if it helps is the CSS file

      @charset "UTF-8";

      body {

                font-family: Verdana, Geneva, sans-serif;

                margin: 0;

                padding: 0;

                background: #7584af; /* Old browsers */

                background: -moz-linear-gradient(top,  #7584af 0%, #3562a5 100%); /* FF3.6+ */

                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7584af), color-stop(100%,#3562a5)); /* Chrome,Safari4+ */

                background: -webkit-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* Chrome10+,Safari5.1+ */

                background: -o-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* W3C */

       

       

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7584af', endColorstr='#3562a5',GradientType=0 ); /* IE6-9 */

                background-color: #FFF;

                background-repeat: no-repeat;

                background-position: top;

                display: block;

      }

       

       

      header, section, footer, aside, nav, article, figure {

                display: block;

      }

      ul , ol, dl{

                padding: 0;

                margin: 0;

                text-align: center;

      }

      footer {

                padding: 10px 0;

                background: #a9b4d6;

                position: relative;/* this gives IE6 hasLayout to properly clear */

                clear: both; /* this clear property forces the .container to understand where the columns end and contain them */

                margin-top: 15px;

                display: block;

      }

      header {

                background-color: #a0a9c8;

                height: 150px;

                display: block;

                border-top-width: medium;

                border-right-width: thin;

                border-bottom-width: thin;

                border-left-width: thin;

                border-top-style: none;

                border-right-style: none;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: #000;

                border-right-color: #000;

                border-bottom-color: #000;

                border-left-color: #000;

                text-align: left;

                vertical-align: middle;

                padding: 0px;

      }

      body header div {

                height: 80%;

                margin-top: 0px;

                margin-right: auto;

                margin-bottom: 0px;

                margin-left: auto;

                vertical-align: bottom;

                display: block;

      }

      nav {

                background-color: #3562a5;

                display: block;

                width: 100%;

                height: 25%;

      }

      nav     ul {

                list-style-type: none;

                height: 30px;

                font-size: medium;

      }

      nav ul li {

      }

      #container {

                width: 960px; /* the auto value on the sides, coupled with the width, centers the layout */

                background-color: #FFFFFF;

                -moz-box-shadow: 4px 0px 5px #000000;

                -webkit-box-shadow: 4px 0px 5px #000000;

                box-shadow: 4px 0px 5px #000000;

                height: auto;

                margin-top: 0;

                margin-right: auto;

                margin-bottom: 0;

                margin-left: auto;

                display: block;

      }

      nav ul a , nav ul a:visited{

                -moz-box-shadow:inset 3px 3px 5px #474c5a;

                -webkit-box-shadow:inset 3px 3px 5px #474c5a;

                box-shadow:inset 3px 3px 5px #474c5a;

                width: 14.2857%;

                list-style-type: none;

                height: 30px;

                float: left;

                display: block;

                clear: right;

                border-top-width: medium;

                border-right-width: medium;

                border-bottom-width: medium;

                border-left-width: medium;

                border-top-style: none;

                border-right-style: solid;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: #7584af;

                border-right-color: #7584af;

                border-bottom-color: #7584af;

                border-left-color: #7584af;

                text-decoration: none;

                background: #7584af; /* Old browsers */

                background: -moz-linear-gradient(top,  #7584af 0%, #3562a5 100%); /* FF3.6+ */

                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7584af), color-stop(100%,#3562a5)); /* Chrome,Safari4+ */

                background: -webkit-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* Chrome10+,Safari5.1+ */

                background: -o-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* Opera 11.10+ */

                background: -ms-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* IE10+ */

                background: linear-gradient(top,  #7584af 0%,#3562a5 100%); /* W3C */

       

       

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7584af', endColorstr='#3562a5',GradientType=0 ); /* IE6-9 */

                color: #FFF;

                font-size: 90%;

                font-weight: normal;

                padding-top: 6px;

                padding-right: 3px;

                padding-bottom: 0px;

                padding-left: 3px;

      }

      nav ul a:hover, nav ul a:active {

                width: 14.2857%;

                list-style-type: none;

                float: left;

                display: block;

                clear: right;

                background: #3562a5; /* Old browsers */

                background: -moz-linear-gradient(top,  #3562a5 0%, #7584af 100%); /* FF3.6+ */

                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3562a5), color-stop(100%,#7584af)); /* Chrome,Safari4+ */

                background: -webkit-linear-gradient(top,  #3562a5 0%,#7584af 100%); /* Chrome10+,Safari5.1+ */

                background: -o-linear-gradient(top,  #3562a5 0%,#7584af 100%); /* Opera 11.10+ */

                background: -ms-linear-gradient(top,  #3562a5 0%,#7584af 100%); /* IE10+ */

                background: linear-gradient(top,  #3562a5 0%,#7584af 100%); /* W3C */

       

       

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3562a5', endColorstr='#7584af',GradientType=0 ); /* IE6-9 */

                padding-top: 6px;

                padding-right: 3px;

                padding-bottom: 0px;

                padding-left: 3px;

                color: #FF0;

      }

      .AHALogo {

                background-color: #a0a9c8;

                float: left;

                width: 45%;

                height: 120px;

                background-image: url(../images/AHA-logo-master-blue.gif);

      }

      #container header div h3 {

                color: #FFF;

                margin-right: 0px;

                margin-left: 0px;

                vertical-align: bottom;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 0px;

                padding-left: 10px;

      }

      .sidebar {

                background-color: #FFFFFF;

                float: left;

                clear: both;

                margin-top: 0px;

                width: 200px;

                height: 900px;

                margin-left: 20px;

                margin-right: 0px;

                margin-bottom: 20px;

                border-top-width: medium;

                border-right-width: medium;

                border-bottom-width: medium;

                border-left-width: medium;

                border-top-style: none;

                border-right-style: solid;

                border-bottom-style: none;

                border-left-style: none;

                border-top-color: #000;

                border-right-color: #000;

                border-bottom-color: #000;

                border-left-color: #000;

                display: block;

      }

      .article {

                float: left;

                width: 95%;

                padding-top: 0px;

                padding-right: 0px;

                padding-bottom: 7px;

                padding-left: 15px;

                margin: 0px;

                border: thin solid #a9b4d6;

                -moz-border-radius: 4px;

                -webkit-border-radius: 4px;

                border-radius: 4px;

                background: #ffffff; /* Old browsers */

                background: -moz-linear-gradient(top,  #ffffff 71%, #d7e6e8 89%, #9abab4 100%); /* FF3.6+ */

                background: -webkit-gradient(linear, left top, left bottom, color-stop(71%,#ffffff), color-stop(89%,#d7e6e8), color-stop(100%,#9abab4)); /* Chrome,Safari4+ */

                background: -webkit-linear-gradient(top,  #ffffff 71%,#d7e6e8 89%,#9abab4 100%); /* Chrome10+,Safari5.1+ */

                background: -o-linear-gradient(top,  #ffffff 71%,#d7e6e8 89%,#9abab4 100%); /* Opera 11.10+ */

                background: -ms-linear-gradient(top,  #ffffff 71%,#d7e6e8 89%,#9abab4 100%); /* IE10+ */

                background: linear-gradient(top,  #ffffff 71%,#d7e6e8 89%,#9abab4 100%); /* W3C */

       

       

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#9abab4',GradientType=0 );

                clear: none;

      }

      #container header div .strip {

                height: 17px;

                background-color: #7584b0;

                width: 55%;

                float: left;

      }

      .strapline {

                vertical-align: bottom;

                width: 55%;

                float: left;

                margin: 0px;

                background-image: url(../images/strapline.gif);

                background-repeat: no-repeat;

                background-position: left bottom;

                height: 100px;

      }

      h1 , h2, h3, h4, h5, h6, p{

                font-family: Verdana, Geneva, sans-serif;

                font-size: 100%;

                color: #000000;

                margin-top: 0px;

                margin-bottom: 0px;

      }

      h1 {

                margin-top: 0px;

                color: #929fc5;

                text-transform: uppercase;

                font-size: 130%;

      }

      .article h1 {

                margin-top: 7px;

                font-size: 120%;

      }

      .content {

                float: left;

      }

      a {

                text-decoration: none;

      }

      #container a .article:hover {

                background-color: #0F0;

      }

      #mainContent {

                margin-top: 15px;

                height: auto;

                display: block;

      }

      #mainContent #sinlgleCol {

                margin-right: 2%;

                margin-left: 2%;

                display: block;

      }

      #container footer p {

                text-align: right;

                padding-right: 2%;

      }

      #container footer address {

                text-align: right;

                padding-right: 2%;

      }

      #container #mainContent .article h1 a {

                color: #929fc5;

      }

      .lefthandColumn {

                float: left;

                height: auto;

                width: 25%;

                margin-right: 0px;

      }

      .container #mainContent .article h1 a:hover {

                color: #003782;

      }

      .container #mainContent table {

                margin-right: 2%;

                margin-left: 2%;

                width: 96%;

                border-top-style: none;

                border-right-style: none;

                border-bottom-style: none;

                border-left-style: none;

                vertical-align: top;

                padding-top: 10px;

                padding-right: 10px;

                padding-bottom: 10px;

                padding-left: 0px;

      }

      .container #mainContent table tr {

                padding: 3px;

      }

      .container #mainContent table tr td p {

                padding-top: 5px;

                padding-bottom: 5px;

                margin: auto;

                line-height: 1.3em;

      }

      .tableColumnOne {

                width: 20%;

      }

      .FirstPrevNextLast {

                width: 70%;

                background-color: #CCC;

      }

      #righthandCol {

                float: left;

                width: 75%;

      }

      #ResultsNav {

                border-top-width: 1px;

                border-bottom-width: 1px;

                border-top-style: solid;

                border-bottom-style: solid;

                border-top-color: #000;

                border-bottom-color: #000;

                padding-top: 5px;

                padding-bottom: 5px;

                width: 97%;

                margin-top: 20px;

                text-align: justify;

                float: left;

                clear: left;

                margin-bottom: 20px;

      }

      .fltrightNav {

                float: right;

      }

      .fltrightNav {

                float: right;

      }

       

       

      .ResultsNavHome {

                border-top-width: 1px;

                border-bottom-width: 1px;

                border-top-style: solid;

                border-bottom-style: solid;

                border-top-color: #000;

                border-bottom-color: #000;

                padding-top: 5px;

                padding-bottom: 5px;

                width: 96%;

                margin-top: 20px;

                text-align: justify;

                float: none;

                clear: left;

                margin-bottom: 20px;

                margin-right: 2%;

                margin-left: 2%;

      }

      input {

                width: 96%;

                margin-right: 0%;

                height: 30px;

                margin-bottom: 6px;

                margin-left: 0%;

                margin-top: 5px;

      }

      .lefthandColumn .sidebar form {

                border: 1px solid #000;

                width: 86%;

                padding-top: 2%;

                padding-right: 4%;

                padding-bottom: 2%;

                padding-left: 4%;

                margin-top: 10px;

      }

      .sidebar form p #submit {

                color: #0F0;

                background: #7584af; /* Old browsers */

                background: -moz-linear-gradient(top,  #7584af 0%, #3562a5 100%); /* FF3.6+ */

                background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7584af), color-stop(100%,#3562a5)); /* Chrome,Safari4+ */

                background: -webkit-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* Chrome10+,Safari5.1+ */

                background: -o-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* Opera 11.10+ */

                background: -ms-linear-gradient(top,  #7584af 0%,#3562a5 100%); /* IE10+ */

                background: linear-gradient(top,  #7584af 0%,#3562a5 100%); /* W3C */

       

       

      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7584af', endColorstr='#3562a5',GradientType=0 ); /* IE6-9 */

                color: #FFF;

                font-size: 90%;

                font-weight: bold;

                padding-top: 3px;

                padding-right: 3px;

                padding-bottom: 0px;

                padding-left: 3px;

                text-transform: uppercase;

      }

      .sidebar form p #submit:hover {

                color: #FF6;

      }

      #container #mainContent #sinlgleCol p {

                line-height: 1.5em;

                padding-bottom: 5px;

      }

      #container #mainContent #sinlgleCol ul li {

                text-align: left;

                padding-bottom: 1%;

                font-size: 100%;

                line-height: 1.5em;

      }

      .bullets {

                text-align: left;

                font-style: italic;

                list-style-position: inside;

                list-style-type: disc;

                margin-left: 0px;

                padding-left: 0px;

                text-indent: 0px;

      }