In some projects that I work on, I need a quick way of adding some cool-looking user-friendly on/off switch. Checkboxes are ugly! And I don’t want to add a new component/plugin to the already loaded pages. So, I wrote some quick code snippet for a switch based on Bootstrap 3 and jQuery. Here is the HTML code:
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 stumbleduponseveral 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:
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!