Twitter Bootstrap CSS3 gradient display issue in IE

We used Twitter Bootstrap for our latest project and ran into an issue with how gradients display in Internet Explorer. For example, I specified the hex numbers for the navbar using CSS3 gradients, and it was displaying fine in Firefox and Chrome. But in IE 6-8, it displayed as a weird blue color.

The solution

After digging into it, we found that many of the Bootstrap’s default styles are 3-digit hex values. This was undoubtedly an attempt by Bootstrap to limit the amount of code in the core files. However, older versions of IE require all 6 digits of the hex value to display the number correctly when using this filter:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555', endColorstr='#222', GradientType=0)

For example, if I want my starting gradient color to contain the gray color #555 I was specifying:

#555

But Internet Explorer by default adds 3 zeros before the number, so now it reads as:

#000555

Which is a dark blue color, not gray like I intended.

So just to be safe, we went through all of our core CSS files and changed any 3-digit hex values used in this filter to the full 6 digits. This seemed to solve the problem.

Leave a Reply

Your email address will not be published. Required fields are marked *