Social Icons

twitterfacebooklinkedinbehancerss feedemail

Friday, November 9, 2012

Quick Tip: IE Bug Fixes For Twitter Bootstrap

Quick Tip: IE Bug Fixes For Twitter Bootstrap

During a recent web development project using Twitter Bootstrap, I came across two CSS bugs in IE7 and IE8 that drove me nuts for a while. Hopefully these quick fixes will help anyone else who encounters these issues.

The first is an issue in the drop-down for IE7/8, which seems to be a combination of the z-index and the filter applied to the fixed-position element not playing nice. The easiest and most practical way to solve this is to simply get rid of the filter from .toolbar. All this line does is apply a gradient to the element and remember since we are dealing with two old browsers in IE7 and IE8 all we are looking for here is graceful degradation so removing the filter shouldn't be a big concern in the grand scheme of your design. You can read more about this issue on here.

The other issue I've come across doesn't have much documentation or information on it but the fix I found is worth mentioning. Within the navbar I've found that any image links that have the .pull-left or .pull-right classes applied to the <a> tag, are not floated correctly. I've found if you remove either of these classes from the <a> tag and apply them directly to the img tags themselves, the issue corrects itself. In other words, try floating the img not the <a> link.

If anyone else has come across any other IE bugs for Twitter Bootstrap feel free to share.


  1. I found this blog very useful.Thanks for sharing.
    Web Design

  2. Thank you. Set me on the right path.
    Adding filter:none; to .navbar-nav .open .dropdown-menu fixed it right up for me.

  3. Congratulations
    guys, quality information you have given!!!

    Infographic Design Birmingham

  4. Webzin Infotech offers a full design and development service enabling you to maintain continuity between your website and other promotional material. Our websites use the modern browser coding and backwards compatibility to produce websites that are up to 50% more efficient making them speedy to download.
    mobile website India

  5. This post just
    made my day. I was in search for such kind of topic since long; finally my
    search is over special thanks to you. It provides a useful info for the
    readers. Great work, Congrats!

  6. Thanks for sharing i give web development project using twitter.I am finding it .It was good knowledge and good job.Thank you.

  7. Thanks for share give the IE bugs for twitter bootstrap.This is the one of best web designing part.Very nice part of this Thank you.




What We Do...

Queens Web Design and Graphics is a web and graphic design company in Queens, NY specializing in providing local businesses with affordable websites offering design, animation and multimedia services. Learn More...