Forums

Give help. Get help.

  • # February 4, 2014 at 9:25 am

    Hello

    I’m trying to get a site to process media queries in IE8.

    Right now the problem is everything is one column, and the mobile-only menu is active. Even when viewing full screen in IE8 on a PC.

    Here is the dev site link:

    http://bluejprojects.com/aw/

    Here are the links that Boostrap site provides for IE8 support..

    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    

    I’ve implemented them in my header.php (WordPress)

    And I have an old PC with IE8 for testing – it doesn’t seem to make a difference.

    Any ideas what is wrong?

    Thanks for your help.

    # February 4, 2014 at 10:52 am

    Do you even need to support IE8?

    # February 4, 2014 at 11:41 am

    Chris,

    Fair question. But Bootstrap site works in IE8 and they tell you how to do it.

    So I’d like to see where I’m going wrong…

    Now I see a warning window that says 0% of respond.min.js is fetched from oss.maxcdn.com so

    I will try again to host the respond.min.css file myself. That didn’t work either, earlier, but I can try it again.

    # February 5, 2014 at 5:55 am

    Hello, shouldn’t the code be uncommented like this:

    [if lt IE 9]
    <script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    [endif]

    # February 5, 2014 at 6:50 am

    elvis

    Thank you for chiming in.

    The code should not be uncommented. That is the correct syntax
    – for conditional formatting for IE
    (http://www.quirksmode.org/css/condcom.html)

    I am sure I am not doing something right, though!

    # February 5, 2014 at 9:02 am

    Maybe try moving the conditional statements below the css links? Not sure if this would work but…

    Also, I know you’ve tried this before but host respond.js on your server and make sure it’s file path is correct.

    http://davekiss.com/ie8-respond-js-and-wordpress/

    # June 24, 2014 at 4:26 am

    Hey Joanne,

    Any luck with that bug?

    I’m also facing the same issue.

    Thanks for your help.

    # June 24, 2014 at 4:44 am

    Hey Manish –
    Thanks for checking in. I did not solve this. My ie8 machine died too, so I have sidelined this effort for now.

    # June 24, 2014 at 6:25 am

    I’ve always found that respond.js is a hit-or-miss. Sometimes it works, sometimes it doesn’t….with no clear explanation. I’ve given up trying to figure out the why’s and how’s of it.

    Same with CSS3Pie, actually.

    # June 24, 2014 at 2:12 pm

    I actually just found a fix to that today and started instrumenting through my site.

    If you look through the source code of getbootstrap.com you’ll notice they are using col-xs-* for all columns vs the other sizes sm, md, lg. Using col-xs-* will get you columns sitting next to each other in IE 8, however, you obviously will loose the ability to control the size when the columns become stacked, hence the entire reason for xs, sm, md, and lg columns…

    Hope that helps.

    ~Dean (twitter)

    # July 31, 2014 at 6:50 am

    Hi Joanne Masterson,

    I got a fix for this issue. Actually IE7 and 8 doesnt support the @media properly and of you check the css for “col-md-*” classes and there width is given in media width 992px. Just create a new css file IE eg: IE.css and add in the conditional comments. And then just copy the classes required for your design directly withoun any media queries there and you are done.

    Thanks and Regards

    Ketan

    # July 31, 2014 at 10:40 am

    That is a really sensible solution. Thank you for that, and the explanation!

    # August 11, 2014 at 8:55 pm

    In our case, it is because we didn’t add the following lines in the <head>:

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    without these lines, although respond.js and html5shiv.js are there and loaded, it still does not work in both IE8 and IE9

    # August 11, 2014 at 11:38 pm

    Yes both meta tags are compulsory for bootstrap to work.

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>

    Meta viewport makes your page and css work as per your device resolution. If its absent the page will fit to screen on all devices.

    # August 12, 2014 at 9:35 am

    Hi,

    I am not sure if this is the fix but it may be a cross domain security issue. It could be that you are loading the bootstrap css file from a different CDN than the respond file. You can try using all files locally or set the server to allow it to work. See https://github.com/scottjehl/Respond#cdnx-domain-setup. The only other thing I can think of would be that the respond and html5shiv need to load after the css file so make sure bootstrap and all other css files are above the conditional formatting.

Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag