Navbar dropdowns failing in IE<10 when bootstrap-theme.css included

[jodytate]

With bootstrap-theme.css included, navbar dropdowns fail to work in IE 8. (You can see a one-pixel line appear indicating they're attempting to work, however.)

Test case:

http://jodytate.github.io/bootstrap-dropdown-test/

(Neither jsfiddle or jsbin worked reliably in IE 8 so the best way to test was a standalone site.)

[fchiumeo]

try using respond.js

http://getbootstrap.com/getting-started/#browsers

[cvrebert]

@fchiumeo He's already using it. Did you read the page source?
@jodytate Your example is missing the html5shiv.

[fchiumeo]

ouch,sorry. only see list of js(in firefox, double ouch) not page source
and furthermore don't see using tag nav

I have more attention next time

perhaps one quote in bootstrap doc about using HTML 5 tag in IE 8 and 9 for use html5shiv

@jodytate try changing <nav> by <div>

[jodytate]

@cvrebert the example uses the development version of modernizr that includes the html5shiv.

[jodytate]

I've switched over to html5shiv and removed modernizr. Problem persists.

[jodytate]

After some more digging, it appears that line 158 in bootstrap-theme.css is the culprit somehow. Commenting out that line in causes the dropdown to work.

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

The file as a whole, with the above line included and not commented out, passes a CSSLint test. http://csslint.net/

[jodytate]

@fchiumeo changing <nav> to <div> didn't make a difference

[fchiumeo]

apparently the problem is in property filter in IE8 standards mode

change filter to ms-filter

reference: http://msdn.microsoft.com/en-us/library/ie/ms530752%28v=vs.85%29.aspx

[jodytate]

@fchiumeo Good find. But changing to -ms-filter didn't help.

Here's more information on filter vs. -ms-filter: http://stackoverflow.com/questions/6900647/ms-filter-vs-filter-whats-the-difference

[jodytate]

With @imthepitts, we found that adding position: static to the .navbar class in bootstrap-theme.css fixes the issue. For us, at least. I hesitate to do a pull request until it could be tested more widely.

[fchiumeo]

in your template navbar-static not have the top is correct navbar-static-top

pd: do not change much, but it is something

[jodytate]

@fchiumeo no change when using navbar-static-top

As for the .navbar class, it was deleted in favor of navbar-default in this commit: a0d0864

[RichardD2]

Same problem here - IE8 doesn't show the drop-down; IE9 shows the outline, but no items. Still happening with the latest version of the bootstrap-theme.css file.

Adding position: static to the .navbar class made no difference for me.

Commenting out filter: progid:DXImageTransform.Microsoft.gradient on lines 194 and 221 seems to resolve the issue.

[mdo]

This is a problem of IE and the filter as you've correctly identified—it's why we had .navbar-inner in v2.x. Only option is to wrap the contents of the navbar in another div and add the styling there. I'll see what we can do about this in v3 and the theme though—definitely needs some documentation.

[luxzeitlos]

My workarrount is to put a filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); directly after the #gradient > .vertical into .navbar and .navbar-inverse in the bootstrap-theme.less.

This fixes the issue for me in IE9.

[cwthomas-llu]

I can confirm this issue for IE 9. Because of the corporate environment, it is not a solution to tell users to use another browser. I hope this gets fixed in v3.0.1.

[fschmied]

See also #6548 - there's a workaround by @balexandre (that removes the filter and thus the gradient):

.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle,
.navbar,
.navbar-inverse .navbar-inner {
    filter: none;
    background-image: none;
}