Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Total Newbe Needs Help with Gradients in IE 10

    Help! I'm a total Newbie when it comes to CSS and I need some help.

    Our office is currently on IE8 but there are a few exceptions where IE 10 is deployed. In a number of applications the orignal developer had the following line of code:

    body {
    font-family:arial;
    font-size:10;color:WHITE;
    filterrogidXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#579B60, EndColorStr=#204A34)
    }

    I know from what I've read you need different lines of code for different browsers and different versions of IE to render the gradient in that browser however I have tried numerious things and I cannot render the gradient in IE 10. From what I read I thought that all I needed to do was add the two following lines of code to the above:

    background-image: -ms-linear-gradient(top, #579B60, #204A34);
    background-image: linear-gradient(top, #579B60, #204A34);

    Unfortunately neither works and all I get is white text on a white background instead of white text on a green gradient background.

    Can anyone provide me with the needed code to make the top to bottom gradient work in ie 10?

    Thanks!
    .

  • #2
    New to the CF scene
    Join Date
    Sep 2012
    Location
    South Africa
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi MoonDoggy,

    Have a look at the following:
    Adapting your WebKit-optimized site for Internet Explorer 10

    and

    gradients

    Hope it helps!

  • #3
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK. I'm a bit lost here.

    I took the CSS file and HTM file home last night and tried things out on my Win7/IE10 machine and I got things working. I bring the CSS file into work and put it in place and it doesn't work.

    If I try this gradient sample in an sample HTM file it works.

    Code:
    <html><head> 
    <style type="text/css"> 
    .css3gradient{width:300px;height:100px; 
    color:WHITE; 
    background-color:#579B60; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#579B60, endColorstr=#204A34); 
    background-image:-moz-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-webkit-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-ms-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-o-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#579B60), color-stop(100%,#204A34));} 
    </style> 
    </head><body> 
    <div class="css3gradient"><b>Here is the result</b></div> 
    </body> 
    </html>
    However..... If I take some of the lines from the HTM file and replace them in my CSS file it doesn't work and still showed white text on a white background until I added the background-color line. Here's what code looks like in the current CSS file:

    Code:
    body { 
    font-family:arial; 
    font-size:10; 
    color:WHITE; 
    background-color:467B4D; 
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#579B60, endColorstr=#204A34); 
    background-image:-moz-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-webkit-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-ms-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-o-linear-gradient(top, #579B60 0%, #204A34 100%); 
    background-image:-webkit-gradient(linear, right top, right bottom, color-stop(0%,#579B60), color-stop(100%,#204A34));} 
    }
    Any idea why the CSS fails to render the gradient but with and the inline HTM code it works?

  • #4
    New to the CF scene
    Join Date
    Mar 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    OK, I think I've solved this....

    I did some more testing with the Developer Tools turned on and I noted that it indicated that I was running the app in compatibility mode when there was no apparent reason to do so. I checked and sure enough there was a checkbox checked that said to run all intranet apps in compatibility mode. I checked with the users and none of them indicated that they had turned that feature on so it must have been a default or a carryover setting from their old browser that remained after the upgrade. Since I was running in compatibility mode another article seemed to make sense as this article seem to state that IE10 simply dosn't recognize the FILTER statement regardless of compatibility mode. This explains why it was not rendering the gradient as we could see in the Developer Tools that it was the FILTER statement that was being loaded when in compatibilty mode. by unchecking the compatibilty checkbox we could see it was loading a totally different parameter which then allowed the gradient behavior. I did however leave the background-color statement in the CSS as that will at least prevent white on white from showing up if someone else gets IE 10 and their compatibility mode checkbox is checked.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •