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

Mobile
1

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

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

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

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.


 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 :slight_smile:

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 :slight_smile:

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

5

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:rolleyes:

6

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

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.:slight_smile:

8

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

Also move the respond.js inside the head but after the stylesheets as that’s where they place it in the demos.

10

I also note these medfia queries are invalid.


@media screen and(min-width: 980px) {
	#banner {
		background-color: #ccc;
	background-position: center; /*BC?*/
	} 
}

There should be a space after the ‘and’.


@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

Ok, I made the changes, looking better. Still not getting the bootstrap overides in IE8. I wonder why.

12

There does seem to be an issue with the nav and IE8 but I can’t pinpoint it yet. I’ll keep looking :slight_smile:

13

OK, I have the nav working 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.


<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

Thank you for looking into this, really appreciate it. I will check it out later and hopefully it will work for me too.