SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    for IE8- best way to overide collapsable nav bar and fluid grid

    For a small, responsive Bootstrap site: how do I override the fluid grid and collapsible navbar on a seperate stylesheet for IE8, to make the page non-responsive? Is it a matter of weight or nullifying? I know Bootstrap also has guidance for making my site non-responsive.

    Respond.js can address other 'screen' elements for IE8, assuming that no one with a tablet or smartphone uses IE legacy browsers anyways.

    So I wonder in great anticipation, if a combination of these three methods is a way to go, and most specifically how deal w the navbar and fluid grid.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why do you need to offer different rules if you are using respond.js as that poly-fills media query support to IE8 and so should behave like other modern browsers? Why give a different experience to IE8 only or did I misunderstand the question?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul: Because if a IE8 user minimizes the screen, my responsive media queries engage via respond.js minus the fluid grid and navbar, which doesn't look good. Although now that IE8 is <10%, I'm not sure I really need to worry about that. However, I am still curious how best to override or nullify them; just haven't played around with it yet, or maybe the Bootstrap guidance for making it non-responsive will work.

    Respond.js will work for me, but my bootstrap overrides are not working, other than the media queries. The stylesheet is last in order, and I tried putting the media queries last, but that didn't work. Now maybe something about IE being in quirks mode?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I'm still a little confused because if it looks bad in IE8 at smaller screen widths then it will look bad in all desktop browsers also.

    Maybe I'm not understanding this bit.

    Code:
     engage via respond.js minus the fluid grid and navbar
    Why is IE8 only not getting the fluid grid and navbar?

    The beauty of responsive design is that you scale the page for all browsers nicely so I don't know why you are picking on IE8 (assuming you have enabled the media queries properly). I've just created 150 odd responsive pages in bootstrap for a client and IE8 was no problem at all.

    I feel I may be missing a vital bit of information

    Do you have a link to the site so I can see the problem?

    In answer to your question there should be no problem in over-riding the bootstrap files because that's usually how you code anyway and leave the original intact. Just set up a conditional stylesheet for IE8 and call it last in sequence. Of course you will have to over-ride any media queries and any other cascading styles you have applied.

    As far as quirks mode goes then you should never code IE in quirks mode as you revert all versions of ie9 and below into ie5 mode and they forget everything they've learned this century

    I feel we may need to see the site to help specifically.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I assumed a bootstrap responsive site didn't work in IE8, generally, and that respond.js was a fix some some things and not all. I'll did deeper into what you wrote, and in the meantime my site is at www.jualca.comuf.com. A while back you warned me about a McAfee virus issue, as this is another free hosted test site of mine, just so you know

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, I only have respond.js setup for my 'Home' page as of yet. But then I lose the bootstrap overides like the color of the navbar, background, which you see on the other pages, however the herounit media query works. This all must have something to do with how I'm setting up respond.js.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    First thing you must do is move the html5 shiv into the head as it doesn't work properly inside the body.

    If you can make that change then I'll take another look.

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I moved the shiv on all but the contact page. Still working on banner and navbar issues, so nothings perfect yet.

    Thanks again for your help.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Also move the respond.js inside the head but after the stylesheets as that's where they place it in the demos.

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    I also note these medfia queries are invalid.
    Code:
    @media screen and(min-width: 980px) {
    	#banner {
    		background-color: #ccc;
    	background-position: center; /*BC?*/
    	} 
    }

    There should be a space after the 'and'.

    Code:
    @media screen and (min-width: 980px) {
    	#banner {
    		background-color: #ccc;
    	background-position: center; /*BC?*/
    	} 
    }
    You have a couple of those so fix those and we can test again

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I made the changes, looking better. Still not getting the bootstrap overides in IE8. I wonder why.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    There does seem to be an issue with the nav and IE8 but I can't pinpoint it yet. I'll keep looking

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,546
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    OK, I have the nav working here in IE8.

    There seems to be an issue with the media=screen on the bootstrap.min.css. I've changed it to "all" in my example.

    Code:
    <link href="bootstrap.min.css" rel="stylesheet" media="all">
    <link href="bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    That seems to fix it for me but I haven't narrowed down why this is an issue. I'm assuming its a bug in respond.js but its taken me ages to track this down so I'll have to have a look at it again later.

    Change your link to media="all" and see if that makes it work for you. It shouldn't be an issue unless you are doing a print stylesheet but the print rules are already in the css anyway in @media rules so I don't see a problem.

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2013
    Location
    RI, USA
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for looking into this, really appreciate it. I will check it out later and hopefully it will work for me too.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •