Skip to main content

Forums

This topic contains 32 replies, has 24 voices, and was last updated by  I.m.learning 2 years, 11 months ago.

Viewing 15 posts - 1 through 15 (of 33 total)
  • Author
    Posts
  • #161832

    Joanne Masterson
    Participant

    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.

    #161835

    chrisburton
    Participant

    Do you even need to support IE8?

    #161842

    Joanne Masterson
    Participant

    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.

    #161920

    elvismercado
    Participant

    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]

    #161923

    Joanne Masterson
    Participant

    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!

    #161950

    Soren
    Participant

    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/

    #173545

    Manish Gupta
    Participant

    Hey Joanne,

    Any luck with that bug?

    I’m also facing the same issue.

    Thanks for your help.

    #173556

    Joanne Masterson
    Participant

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

    #173562

    Senff
    Participant

    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.

    #173602

    ddubya
    Participant

    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)

    #177105

    ketan7887
    Participant

    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

    #177124

    Joanne Masterson
    Participant

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

    #178608

    simongcc
    Participant

    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

    #178635

    ketan7887
    Participant

    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.

    #178741

    RossKenney
    Participant

    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-link icon-logo-star icon-search icon-star