Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Bootstrap fixes IE8 not working for me yet

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 33 total)
1 2 3
  • Author
    Posts
  • February 4, 2014 at 9:25 am #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.

    February 4, 2014 at 10:52 am #161835
    chrisburton
    Participant

    Do you even need to support IE8?

    February 4, 2014 at 11:41 am #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.

    February 5, 2014 at 5:55 am #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]

    February 5, 2014 at 6:50 am #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!

    February 5, 2014 at 9:02 am #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/

    June 24, 2014 at 4:26 am #173545
    Manish Gupta
    Participant

    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 #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.

    June 24, 2014 at 6:25 am #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.

    June 24, 2014 at 2:12 pm #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)

    July 31, 2014 at 6:50 am #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

    July 31, 2014 at 10:40 am #177124
    Joanne Masterson
    Participant

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

    August 11, 2014 at 8:55 pm #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

    August 11, 2014 at 11:38 pm #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.

    August 12, 2014 at 9:35 am #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.

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 33 total)
1 2 3
  • The forum ‘CSS’ is closed to new topics and replies.