Search code examples
htmlcssinternet-explorerresponsive-designmedia-queries

IE9 responsive image resize issue with pure CSS3 media query

I try to set responsive layout design.

My issue is: while in 1024*768 screen resolution, checked viewport without scrollbar width is 1007. I set my media query in CSS3 for 1007px viewport to @media screen and (max-width: 1007px)

It works fine in Chrome.

However it doesn't work in IE9. Until @media screen and (max-width: 1024px) IE9 doesn't work correctly.

Since real viewport width without scrollbar is 1007px, I have to make IE9 (and IE7 & IE8 if possible) working in a proper way with 1007px.

Related images are below for Chrome and IE9. As you see in IE9, my image's right side is cropped. In Chrome whole image is displayed as expected.

I also use modernizr-1.7.min.js which it says that A JavaScript library to make MSIE behave like a standards-compliant browser.

MY CSS

    /* html5doctor.com Reset Stylesheet v1.5 Last Updated: 2010-08-12 Author: Richard Clark - http://richclarkdesign.com */
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;vertical-align:baseline;background:transparent;margin:0;padding:0;}body{line-height:1;}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;}nav ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:none;}a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}ins{background-color:#ff9;color:#000;text-decoration:none;}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700;}del{text-decoration:line-through;}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help;}table{border-collapse:collapse;border-spacing:0;}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}input,select{vertical-align:middle;}

#page{
    max-width:1280px;

    overflow-y:scroll;


}

#wrapper-header, #wrapper-content, #wrapper-footer, #wrapper-nav {
    width: 100%; overflow: hidden;margin:0 auto;
}

@media screen and (max-width: 1007px) {

    #logoimg {
      width: inherit;  /* This makes the next two lines work in IE8. */
      max-width: 100%  /* Add !important if needed. */
      height: auto;    /* Add !important if needed. */
        }
    }

MY HTML 

    <!DOCTYPE html>
<html>
<head>  
    <meta charset="utf-8">
    <title>Lorem Ipsum</title>
    <meta name="viewport"  content="initial-scale=1, width=device-width">
    <script src="js/modernizr-1.7.min.js"></script><!-- this is the javascript allowing html5 to run in older browsers -->
    <script src="js/IE9.js"></script><!-- A JavaScript library to make MSIE behave like a standards-compliant browser. -->
    <link rel="stylesheet" type="text/css" href="css/css.css" media="screen" />
</head>
<body id="page">
    <div id="wrapper-nav">

    </div><!-- navigation wrapper-->
    <div id="wrapper-header"><img id="logoimg" src="img/logo.jpg" alt="" /></div><!-- header wrapper-->
    <div id="wrapper-content">b</div><!-- content wrapper -->
    <div id="wrapper-footer">

        <script type="text/javascript">     
            var viewportHeight;
            var viewportWidth;
            if (document.compatMode === 'BackCompat') {
                viewportHeight = document.body.clientHeight;
                viewportWidth = document.body.clientWidth;
            } else {
                viewportHeight = document.documentElement.clientHeight;
                viewportWidth = document.documentElement.clientWidth;
            }
            document.write('<p>Your viewport width without scrollbars is '+viewportWidth+'x'+viewportHeight+'</p>');
        </script>
        <p>Lorem Ipsum</p>


    </div><!-- footer wrapper -->
</body>
</html>

IE9

enter image description here

CHROME

enter image description here

Solution

  • After reading http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries/, I found that I should have a main wrapper for my all wrappers. (header wrapper, footer wrapper etc)

    Then I corrected my self.

    regards