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 :-
[xml]The navbar component is now white by default, with an optional class to darken it[/xml]
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)
[css highlight=”16″].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);
}[/css]
Apparently, this filter is causing problems. The fix is a pretty simple one. In my own custom CSS, I can simply remove the filter :-
[css].navbar-inner{ filter:none;}[/css]
And problem solved!
Hope this little tip helps someone out there.
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..
I was thinking of going down that route, actually. So you saying recompiling it would have changed the colors in the filter CSS ?
this was very helpful, thanks!
Thanks for this hint.. trying to solve it for hours.
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.
no change still display as black color, i want to display blue color
Hallelujah! Thank you!
got the same prob with the site I designed using bootstrap. – quickseorankings.com/dev/
Thanks, saved me hours!
Golden! Thank you! Thank you!
Dear Anuj!
Thank you very . You saved my day.