Twitter Bootstrap - nav bar issues in internet explorer

I am using Twitter Bootstrap in my rails app. My navbar looks perfect in Firefox / Chrome / Safari (tested chrome on both a Mac & PC). In Internet Explorer, it looks ugly! Wrong colours & everything. Any help you can provide would be appreciated. I can post whatever code would help. Update Here is all of the CSS where I override anything from bootstrap (brought into my app via sass-rails gem). Hopefully it pushes us in the right direction. Note: Where I have `color:#F8F8F8;` below, I used to have `#333`. This is just one iteration of me trying to fix it. I've even tried changing the background color to `#333334` as I think that my precompiler was changing `#333333` to `#333` (don't know for sure though) ``` /* Styling */ .navbar, .navbar-inner, .navbar-fixed-top, .container, #tabs .nav { border:none; background-image:none; } .navbar { font-size:14px; text-shadow:none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; .nav { float:right; } .brand { margin-left:30px; color:#333334; font-family: Georgia, serif } .navbar-inner { background-color: #F8F8F8; border-bottom-color: #E0E0E0; border-bottom-style: solid; border-bottom-width: 1px; color: #333334; } } .navbar .nav > li > a { text-shadow:none; color:#555555; background-color: transparent; cursor:pointer; &:hover { color:#E6E6E6; } } .navbar .nav .active > a, .navbar .nav .active > a:hover { background-color: transparent; color: #555555; } .navbar .nav .inactive > a:hover { color:#999999; } .navbar .nav > li > a.sign-in { color:#555555; padding-top:4px; padding-bottom:4px; margin-top:5px; margin-left:30px; } .navbar .nav > li > a.sign-in:hover { background-position: 0 0px; } .navbar .nav > li > a.active-button { background-color: #E6E6E6; background-image: none; border:1px solid #cccccc; border-radius:4px; box-shadow: none; cursor: pointer; opacity: 0.6499999761581421; outline-color: #555555; outline-style: none; outline-width: 0px; text-decoration: none; text-shadow: none; padding-top:4px; padding-bottom:4px; margin-top:5px; } ``` I have also tried the following (in an attempt to explicitly override anything to do with gradients from Bootstrap): ``` body { color:#333334; } .navbar-inner { background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8)); background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: linear-gradient(top, #F8F8F8, #F8F8F8); } .btn-navbar { background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8)); background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8); background-image: linear-gradient(top, #F8F8F8, #F8F8F8); } ``` Yet another update Fiddling around with the internet explorer developer tools leads me to believe the issue is this: ``` filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0) ``` What is this? Do I need it? (Why does it not use the same gradients as firefox/chrome?) It comes from Bootstrap... I can try to override the colours in there because for whatever reason IE is interpreting `FF333333` as that dark blue.