CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap-3
Orangeman555
Orangeman555

Reputation: 1181

Bootstrap 3 - Invisible Dropdown on IE9 Bug. Fix?

Someone pointed out a bug on the site package I've created using Bootstrap 3

Notice on my website (using Internet Explorer 9) that the dropdown menus show shadows, but no content. ie, they are boxes holding invisible content. (http://www.clipartillustration.com/)

I've searched and found some similar issues but they don't seem to fix the one I'm stating.

Upvotes: 2

Views: 1532

Answers (1)

Miro
Miro

Reputation: 8650

On line 158 in bootstrap-theme.css remove the filter property

.navbar {
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#f8f8f8));
  background-image: -webkit-linear-gradient(top, #ffffff, 0%, #f8f8f8, 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
  background-repeat: repeat-x;
  border-radius: 4px;

  /*Delete this line */
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);*/

  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
}

It bugs IE out and forces it to act like overflow:hidden (or something like that)

Upvotes: 8

Related Questions