#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    13
    Rep Power
    0

    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. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4258
    The "to" keyword is missing from the last declaration:
    Code:
    background-image: linear-gradient(to top, #579B60, #204A34);
    I suggest you open IE10's developer tools and check which rendering mode it's using. It may automatically be switching to one of its compatibility modes instead of using its "Standards mode".
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    13
    Rep Power
    0
    Everyone:

    I made a bit of progress last night but I still have something that's not quite right. After checking the internet I tried this out last night on my home PC running Windows 7 and IE 10:

    body {
    font-family:arial;
    font-size:10;
    color:WHITE;
    filterrogidXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#579B60, endColorstr=#204A34);
    background: -ms-linear-gradient(top, #579B60 0%, #204A34 100%);
    background: linear-gradient(to bottom, #579B60 0%, #204A34 100%);
    }

    The above worked great and I thought I had this solved so I took the CSS file into work this morning and on 2 Windows 7 Enterprise machines running IE 10 the gradient still failed so for the time being I took someone elses advice and added a Background-color line which fixes the white on white problem but I would still like to figure out why it's failing on the IE 10 machines at work but works on my IE 10 PC at home. Here' what I currently have installed at work. If anyone can provide me with more insight I would appreciate your input.

    body {
    font-family:arial;
    font-size:10;
    color:WHITE;
    filterrogidXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#579B60, endColorstr=#204A34);
    background: -ms-linear-gradient(top, #579B60 0%, #204A34 100%);
    background: linear-gradient(to bottom, #579B60 0%, #204A34 100%);
    background-color:467B4D;
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    677
    Rep Power
    441
    On intranet sites, IE defaults to acting like IE7, though I'd still expect it to work using the filter style.

    To make IE10 render as IE10, you can use a meta tag in the HTML. Try putting this between the <head> and </head> tags.

    Code:
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    13
    Rep Power
    0
    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?
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    677
    Rep Power
    441
    Well you're defining your background color wrong, you need a # before the color. What does your HTML on the page it's not working on look like?
  12. #7
  13. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Mar 2004
    Posts
    13
    Rep Power
    0
    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.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    677
    Rep Power
    441
    Ahem. Note my previous comment that IE10 treats intranet sites differently by default, and how to opt into standards mode.

IMN logo majestic logo threadwatch logo seochat tools logo