Twitter Bootstrap - nav bar issues in internet exp

Question

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.

Answer 1

Turns out I was able to fix this by over-riding the default filter code generated by Bootstrap. Big thanks for Nathan and Andres! To override the code I had posted above, I added the following :

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)

Hope this saves some pain for somebody....

Answer 2

Andres Ilich commented on the OP:

"Try filter:none on your navbar (totally forgot about that), IE uses a separate syntax to generate gradients. background-image is still not supported by IE9 to create gradients."

After developing very painful forehead from smacking it numerous times on the desk, this is exactly what fixed the issue for me. Thanks Andres.

Answer 3

From what i can tell you're using a solid color for your background in the top navbar, so you're only adding a background-color but not removing the background-image as well, so try to reset that too like so:

  .navbar-inner {
      background-color: #F8F8F8;
      background-image:none;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }

Answer 4

Internet Explorer is quite good at messing things up what I normally do is use a separate style sheet to fix up explore without messing up the rest of my site. Paste this line of code in your web pages:

<!--[if IE]>
  <link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->

and modify the css to make look better on explorer, and the good part is other browsers will ignore this style sheet.

Answer 5

This happened to me too. But I found out that in CSS gradients, IE (even 9) doesn't seem to except just 3-character HEX codes. So you need to change the hex codes to 3-character instead if they aren't already (such as #CCC to #CCCCCC) so it'll work correctly in IE (only for the IE gradient CSS, not all of them).

If you could post your CSS I could see if there are any other problems. But, my problem was that #CCC was being interpreted as dark blue in IE.

Answer 6

This is much more simple:

.dropdown-menu>li>a:hover, 
.dropdown-menu>li>a:focus, 
.dropdown-submenu:hover>a, 
.dropdown-submenu:focus>a,
.dropdown-menu>li.active>a
{
   filter: none;
}