IE Compatibility Issues

[rosco]

Hi all,

I have set-up the following website http://www.camot.org using a Twitter Bootstrap theme.

However, I have noticed that when I view the website in versions of Internet Explorer I am getting all kinds of problems.

IE6 causes all kinds of structural issues, and IE9 affects the gradient colour as well as the style of buttons.

Any ideas on what is causing this?

Thanks,

Ross

[Paulie_D]

I don’t think Bootstrap supports IE6.

[Paulie_D]

As for the gradient colours my guess is that you have omitted to update / amend the filter parts of the CSS. Took me a while too.

In general though, I don’t bother with gradients for IE…wayyyy too much hassle.

[rosco]

Thanks Paulie. I tried looking at the code to see i there was anything that referred to the glaring pink gradient I am getting but couldn’t find anything. Out of curiosity have you looked at the CSS to see where I am going wrong?

Pretty much given up on IE6.

[jonathansampson]

Your end color is wrong in the filter property. You have an extra “2” at the end of its value. Should just be endColorstr=’#8FC2DB’. After fixing this, the gradient shows properly in IE9.

[rosco]

Thanks Jonathan, life saver. I didn’t spot this

[rosco]

Strangely I can’t actually see the location of this code in any css or php file in this WordPress theme. I can see it here

.navbar-inner, .navbar .fill {

background-image: -khtml-gradient(linear, left top, left bottom, from(#CAEDFA), to(#8FC2DB));

background-image: -moz-linear-gradient(top, #CAEDFA, #8FC2DB);

background-image: -ms-linear-gradient(top, #CAEDFA, #8FC2DB);

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #CAEDFA), color-stop(100%, #8FC2DB));

background-image: -webkit-linear-gradient(top, #CAEDFA, #8FC2DB2);

background-image: -o-linear-gradient(top, #CAEDFA, #8FC2DB);

background-image: linear-gradient(top, #CAEDFA, #8FC2DB);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CAEDFA', endColorstr='#8FC2DB2', GradientType=0);

}

However, I this doesn’t appear to be in the css files.

[jonathansampson]

It’s in your index page, line 87 or so. It’s not actually in any CSS file.

[Author]

Posts