Grow your CSS skills. Land your dream job.

IE Compatibility Issues

  • # June 25, 2012 at 9:39 am

    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

    # June 25, 2012 at 10:21 am

    I don’t think Bootstrap supports IE6.

    # June 25, 2012 at 10:30 am

    I don’t think anything supports IE6

    # June 25, 2012 at 11:34 am

    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.

    # June 25, 2012 at 5:34 pm

    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.

    # June 25, 2012 at 11:46 pm

    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.

    # June 26, 2012 at 5:06 am

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

    # June 26, 2012 at 12:03 pm

    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.

    # June 26, 2012 at 5:59 pm

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

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".