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.
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.
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.
In IE 8, the drop-down bug would disappear if the theme file is not loaded.
So, basically, the fix was to load the Bootstrap theme file only if the browser is not IE, or is IE 9 or higher:
<!--[if gt IE 8]><!-->
<link href="resources/initializr/css/bootstrap-theme.min.css" rel="stylesheet" />
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!