Twitter BootStrap NavBar Color in IE8/9

On September 5, 2012, in Web Development, by Anuj Gakhar

I am a big fan of Bootstrap and recently upgraded one of my projects to v2.1.0 which was released on August 20, 2012.

I have been using a custom background image for the top navbar all this while and after the upgrade, I noticed that my navbar was now white background in IE 8/9 (didn’t look at it in other versions of IE, but I am assuming it would have affected all versions of IE). Now, this is a documented change in the ChangeLog :-

The navbar component is now white by default, with an optional class to darken it

But still does not explain why the background image would stop rendering in IE alone. Anyways, I narrowed it down to this line of code in bootstrap.css (see highlighted line below)

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

Apparently, this filter is causing problems. The fix is a pretty simple one. In my own custom CSS, I can simply remove the filter :-

.navbar-inner{ filter:none;}

And problem solved!

Hope this little tip helps someone out there.

Tagged with:  

11 Responses to Twitter BootStrap NavBar Color in IE8/9

  1. Tom K says:

    This is the biggest reason to use LESS and recompile bootstrap. You could have set your navbar preferences once, then bootstrap would have done all the possilble browser variations for you..

  2. James M says:

    this was very helpful, thanks!

  3. Thanks for this hint.. trying to solve it for hours.

  4. Terry Troxel says:

    Where do you recommend an old novice (71) go to get the hang of how to start all this bootstrap stuff by learning how to find the background color and hover color of the navigation
    bar? I do not know how to use any of the less fuctionality and have always just edites a sites css style sheet. I want to learn all this as I love a challenge, but want to start slow and simple so I can grasp this wonderful stuff. Any positive help will be appreciated.

  5. mathan says:

    no change still display as black color, i want to display blue color

  6. schikulski says:

    Hallelujah! Thank you!

  7. Joe says:

    got the same prob with the site I designed using bootstrap. – quickseorankings.com/dev/

  8. Al says:

    Thanks, saved me hours!

  9. R Snyder says:

    Golden! Thank you! Thank you!

  10. Vladimir says:

    Dear Anuj!
    Thank you very . You saved my day.

Leave a Reply

© 2011 Anuj Gakhar
%d bloggers like this: