IE 8 Responsive

Question

solomon_13000 14 Junior Poster in Training

9 Years Ago

The code below works well on all browser except for IE 8. So I added the respond.js script however it is not responsive in IE 8. Did I missed out something?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
   <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>index</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         .wrap {
         margin-bottom: 0;
         margin-left: auto;
         margin-right: auto;
         margin-top: 0;
         width:980px;
         }
         .header {
         border-bottom-color: rgb(51, 183, 53);
         border-bottom-style: solid;
         border-bottom-width: 15px;
         float: left;
         padding-top: 20px;
         width: 100%;
         }
         .logo {
         float: left;
         width: 25%;
         }
         .header-banner {
         float: left;
         width: 45%;
         }
         ul {
         margin-bottom: 0;
         margin-left: 0;
         margin-right: 0;
         margin-top: 0;
         padding-bottom: 0;
         padding-left: 0;
         padding-right: 0;
         padding-top: 0;
         }
         .header-banner li {
         display: inline;
         float: left;
         list-style-image: none;
         list-style-position: outside;
         list-style-type: none;
         padding-right: 35px;
         }
         .address {
         float: left;
         padding-top: 16%;
         width: 30%;
         }
         .add-img {
         float: left;
         padding-left: 20px;
         }
         .address p {
         float: right;
         padding-right: 30px;
         }
         .middel {
         float: left;
         margin-top: 30px;
         width: 100%;
         padding-bottom:30px;
         border-bottom: solid 15px #aa0000;
         }
         .left-contant {
         -moz-border-bottom-colors: none;
         -moz-border-left-colors: none;
         -moz-border-right-colors: none;
         -moz-border-top-colors: none;
         border-bottom-color: #ccc;
         border-bottom-style: solid;
         border-bottom-width: 1px;
         border-image-outset: 0 0 0 0;
         border-image-repeat: stretch stretch;
         border-image-slice: 100% 100% 100% 100%;
         border-image-source: none;
         border-image-width: 1 1 1 1;
         border-left-color: #ccc;
         border-left-style: solid;
         border-left-width: 1px;
         border-right-color: #ccc;
         border-right-style: solid;
         border-right-width: 1px;
         border-top-color: #ccc;
         border-top-style: solid;
         border-top-width: 1px;
         float: left;
         min-height: 320px;
         width: 49%;
         }
         .right-contant {
         -moz-border-bottom-colors: none;
         -moz-border-left-colors: none;
         -moz-border-right-colors: none;
         -moz-border-top-colors: none;
         border-bottom-color: #ccc;
         border-bottom-style: solid;
         border-bottom-width: 1px;
         border-image-outset: 0 0 0 0;
         border-image-repeat: stretch stretch;
         border-image-slice: 100% 100% 100% 100%;
         border-image-source: none;
         border-image-width: 1 1 1 1;
         border-left-color: #ccc;
         border-left-style: solid;
         border-left-width: 1px;
         border-right-color: #ccc;
         border-right-style: solid;
         border-right-width: 1px;
         border-top-color: #ccc;
         border-top-style: solid;
         border-top-width: 1px;
         float: right;
         min-height:283px;
         width: 45%;
         padding:2%;
         }
         .rotateImg{
         width:561px;
         height: 329px;
         float:left;
         margin:10px 10px 0px 140px;
         }
         .footer {
         float: left;
         width: 100%;
         padding-top:20px;
         }
         .footer-logo {
         float: left;
         text-align: center;
         width: 80%;
         }
         .footer-address {
         float: right;
         width: 20%;
         }
         @media screen and (max-width: 991px) {
         .wrap {
         width: 720px;
         }
         .logo img {
         width: 100%;
         }  
         .header-banner li {
         display: inline;
         float: left;
         padding-right: 32px;
         width: 40%;
         }
         .header-banner img {
         float: left;
         height: auto;
         width: 100%;
         }
         .footer-logo > img {
         width: 100%;
         }
         .address {
         padding-top: 10px;
         }
         .add-img {
         float: left;
         padding-left: 0;
         text-align: center;
         width: 100%;
         }  
         }
         @media screen and (max-width: 767px) {
         .wrap {
         width: 100%;
         }
         .address {
         float: left;
         width: 40%;
         }
         .logo {
         float: none;
         margin-bottom: 20px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 0;
         width: 35%;
         }
         .header-banner {
         float: left;
         width: 60%;
         }
         .header-banner li {
         display: inline;
         float: left;
         padding-right: 0;
         width: 40%;
         }
         .address p {
         text-align: center;
         }
         .add-img {
         float: left;
         padding-left: 0;
         text-align: center;
         width: 100%;
         }
         .left-contant{ width:100%;}
         .right-contant{ width:95%; margin-top:20px;}
         .footer-logo {
         width: 100%;
         }
         .footer-address {
         float: left;
         width: 100%;
         }
         }
         @media screen and (max-width: 480px) {
         .header-banner {
         float: left;
         text-align: center;
         width: 100%;
         }
         .header-banner li {
         display: inline;
         float: none;
         padding-right: 0;
         width: auto;
         }
         .address {
         float: left;
         text-align: center;
         width: 100%;
         }
         .add-img {
         float: none;
         padding-left: 0;
         text-align: center;
         width: auto;
         }
         .address p {
         float: none;
         padding-left: 30px;
         }
         .header-banner img {
         float: none;
         height: auto;
         width: unset;
         }
         .logo {
         float: none;
         margin-bottom: 20px;
         margin-left: auto;
         margin-right: auto;
         margin-top: 0;
         text-align: center;
         width: 100%;
         }
         .logo img {
         text-align: center;
         width: auto;
         }
         .right-contant {
         margin-top: 20px;
         text-align: center;
         width: 95%;
         }
         .footer-address {
         float: left;
         text-align: center;
         width: 100%;
         }  
         }
      </style>
      <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>      
   </head>
   <body>
      <div class="wrap">
         <div class="header">
            <div class="logo"><a href="#"><img alt="logo" src="logo.jpg"></a></div>
            <div class="header-banner">
               <ul>
                  <li><img alt="saint_1" src="saint_1.jpg"></li>
                  <li><img  alt="saint_2" src="saint_2.jpg"></li>
               </ul>
            </div>
            <div class="address">
               <div class="add-img"> <img  alt="saint_3" src="saint_3.jpg"></div>
               <p>
                  <b>CONTACT US:</b><br>
                  +6 012 - XXX XXXX<br>
                  +6 012 - XXX XXXX
               </p>
            </div>
         </div>
         <!--header end here-->
         <div class="middel">
            <div class="left-contant"></div>
            <div class="right-contant">
               <b>CONTACT
               US:<br></b>
               +6 012 - XXX XXXX<br>
               +6 012 - XXX XXXX<br>
            </div>
         </div>
         <!--header end here-->
         <div class="footer">
            <div class="footer-logo"><img alt="footer" src="footer.jpg"></div>
            <div class="footer-address">xxxxxxxxx<br>xxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxxxxxx<br>xxxxxxxxxxxxxx</div>
         </div>
         <!--header end here-->
      </div>

   </body>
</html>

javascript

Edited 9 Years Ago by solomon_13000

2 Contributors
4 Replies
224 Views
4 Hours Discussion Span
Latest Post 9 Years Ago Latest Post by gentlemedia

gentlemedia 803 Master Poster

9 Years Ago

respond.js is a JavaScript polyfill for CSS3 media queries and as far as I can see you didn't declare any media queries in your styles, so there's nothing to respond to.

EDIT: Sorry my bad, I overlooked your media queries in your styles but the below still stands :)

But I'd recommend to use for IE8 (in conditional comments) CSS min-width and max-width properties on your container div wrap and call it a day. IMHO there's not really a need to make your website responsive in IE8, because IE8 is only on (old) desktops/laptops.

<!--[if IE 8]>
.wrap {
    min-width: 960px;
    max-width: 1100px;
}
<![endif]-->

Edited 9 Years Ago by gentlemedia

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

gentlemedia 803 Master Poster · Answer 1 · 2015-10-21T14:25:03+00:00

Respond.js doesn't parse CSS referenced via @import, nor does it work with media queries within style elements, as those styles can't be re-requested for parsing.

This is why it's not working for you. You will need to put your CSS in an external stylesheet.

solomon_13000 14 Junior Poster in Training · Answer 2 · 2015-10-21T17:11:28+00:00

I placed CSS as an external style sheet

   <head>
      <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
      <title>index</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <script src="js/respond.js"></script>     
      <link href="css/style.css" rel="stylesheet" type="text/css">
   </head>

However it's still the same.

gentlemedia 803 Master Poster · Answer 3 · 2015-10-21T17:39:03+00:00

I think you need to load respond.js after styles.css. It's good practice anyway to load first your styles and then your scripts.