title: Twitter Bootstrap - nav bar issues in internet explorer
body: <p>I am using Twitter Bootstrap in my rails app.  My navbar looks perfect in Firefox / Chrome / Safari (tested chrome on both a Mac &amp; PC). In Internet Explorer, it looks <em>ugly</em>! Wrong colours &amp; everything.</p>
  
  <p>Any help you can provide would be appreciated. I can post whatever code would help.</p>
  
  <h2>Update</h2>
  
  <p>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.</p>
  
  <p>Note: Where I have <code>color:#F8F8F8;</code> below, I used to have <code>#333</code>. This is just one iteration of me trying to fix it.  I've even tried changing the background color to <code>#333334</code> as I think that my precompiler was changing <code>#333333</code> to <code>#333</code> (don't know for sure though)</p>
  
  <pre><code>/*  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 &gt; li &gt; a {
    text-shadow:none;
    color:#555555;
    background-color: transparent;
    cursor:pointer;
  
    &amp;:hover {
      color:#E6E6E6;
    }
  }
  
  .navbar .nav .active &gt; a, .navbar .nav .active &gt; a:hover {
    background-color: transparent;
    color: #555555;
  }
  
  .navbar .nav .inactive &gt; a:hover {
    color:#999999;
  }
  
  .navbar .nav &gt; li &gt; a.sign-in {
    color:#555555;
    padding-top:4px;
    padding-bottom:4px;
    margin-top:5px;
    margin-left:30px;
  }
  
  .navbar .nav &gt; li &gt; a.sign-in:hover {
  
    background-position: 0 0px;
  
  }
  
  .navbar .nav &gt; li &gt; 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;
  }
  </code></pre>
  
  <p>I have also tried the following (in an attempt to explicitly override anything to do with gradients from Bootstrap):</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p><strong>Yet another update</strong></p>
  
  <p>Fiddling around with the internet explorer developer tools leads me to believe the issue is this:</p>
  
  <pre><code>filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0)
  </code></pre>
  
  <p>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 <code>FF333333</code> as that dark blue.  </p>