Tag Archives: IE 8

Bootstrap theme and IE7 and hours of debugging!

I was trying to apply bootstrap CSS framework to a page and things where going smooth until I started testing it with IE 8. For some reason, the drop-down menu in the navigation bar was not showing correctly .. it was stacked below other elements in the page.

The bootstrap drop-down menu appears correctly in Firefox.
The bootstrap drop-down menu appears correctly in Firefox.

 

But is rendered incorrectly in IE 8
But is rendered incorrectly in IE 8

Well .. I tried searching for a fix for this issue and stumbled upon several suggestions, mainly involving z-index CSS property. Unfortunately, none of them worked to fix this issue without breaking other elements.

It was really puzzling, specially that the example on the Bootstrap website was working just fine. So, I began tracing its code line by line, trying to remove some of the javascript libraries in my code one by one, adding html5shiv, removing it, adjusting meta tags .. nothing worked.

After several maddening hours, I found the ultimate cause of this issue … it was the Bootstrap theme CSS file that accompanies Bootstrap. This file adds some 3D shading effects to Bootstrap components. Here is how a page looks with and without it.

Bootstrap page without theme file.
Bootstrap page without theme file.
Bootstrap page with theme file.
Bootstrap page with theme file.

In IE 8, the drop-down bug would disappear if the theme file is not loaded.

In IE 8, not loading the Bootstrap theme file would eliminate the drop-down menu bug.
In IE 8, not loading the Bootstrap theme file would eliminate the drop-down menu bug.

So, basically, the fix was to load the Bootstrap theme file only if the browser is not IE, or is IE 9 or higher:

The above code tells browsers that are greater than IE 8 or not IE to load Bootstrap theme file. Otherwise, don’t. This works like a charm, though at the (bearable) cost of sacrificing 3D shading effects for IE 8 and below.

I hope this would help save someone hours of frustration!