Total Newbe Needs Help with Gradients in IE 10 - CSS forum at WebmasterWorld - WebmasterWorld

Forum Moderators: not2easy

Message Too Old, No Replies

Total Newbe Needs Help with Gradients in IE 10

MoonDoggy

11:00 pm on Mar 5, 2013 (gmt 0)

10+ Year Member

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;
filter:progid:DXImageTransform.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!
.

lucy24

1:23 am on Mar 6, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Admittedly it's a long shot, but have you tried simply feeding MSIE 10 the same CSS you would give a normal browser? I don't think the -ms- prefix is the answer. It rarely is, because its very existence requires MSIE to admit that there exist other browsers, and that it's doing something differently from them. Worst case, it may even cancel any preceding code that would have worked by itself.

Check one thing before you tear out any more hair. Fine-tooth-comb the whole code and look for any references to "background" of any kind. All it takes is one white background riding on top of your body background and the whole thing becomes invisible.

Incidentally: Some cursory experimenting suggests that you may get better backward compatibility if you attach the background-image property to the html instead of the body, and set an explicit min-height of 100%. This is only relevant if you've got pages that could potentially not fill the entire vertical area of the viewport. (It's the same principle that kicks in if you've got a bottom-anchored image that has to stay at the very bottom of the window even if you have only two lines of text.)

Edit: The whole syntax is wonky. With a normal vendor prefix you'd expect something like
-moz-background-image: blahblah
but here it has to be
background-image: -moz-blahblah
even though this means multiple "background" definitions in the same CSS. Don't really like that, but the validator seems to be happy. Well, except for insisting that "top" isn't a color. But I'm sure they will sort that out in time.

Further edit with topic drift: That's a nice shade of green, btw. Or range of shades, I guess. When I first saw color values pointing to a green gradient it made me uneasy. But this is restful ;)

drhowarddrfine

3:18 am on Mar 6, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Remove the -ms prefixed one and change the "top" to "to bottom" and see if that works. I'm not where I can test this right now.

MoonDoggy

6:06 pm on Mar 6, 2013 (gmt 0)

10+ Year Member

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.

<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:

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?

MoonDoggy

9:27 pm on Mar 6, 2013 (gmt 0)

10+ Year Member

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.

lucy24

11:04 pm on Mar 6, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

background-color:467B4D;

Typo, I hope.

Funny, I was just reading about "compatibility mode" the other day.

:: shuffling papers ::

My impression is that Compatibility Mode means "forget that IE increasingly behaves like other browsers and treat it as if it still has all the old quirks like IE6."

:)

IE10 does not need to recognize the "FILTER" statement; that was basically MSIE <10's equivalent of a vendor prefix.

As noted elsewhere in this forum, MSIE 10 doesn't recognize the Conditional Comment. In this case that makes it easy for you, because anything that applies only to MSIE <10 can go inside a cc where it won't bother anyone else.

that will at least prevent white on white from showing up if someone else gets IE 10 and their compatibility mode checkbox is checked

Well, yes. If the page does not display as intended-- or at least display readably --both in and out of "Compatibility Mode", it is the designer's responsibility to make adjustments. The era of "Best viewed in..." is long gone.

drhowarddrfine

12:44 pm on Mar 7, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

As noted elsewhere in this forum, MSIE 10 doesn't recognize the Conditional Comment. In this case that makes it easy for you...

For him maybe but not the rest of us. :)

IE10 doesn't recognize png for favicons so using conditional comments to feed IE10 an ico won't work anymore and you have to pull other tricks. I'm sure we'll have more issues like that as time goes on.

While IE10 is the best IE, it's still the worst browser on the planet.

lucy24

9:11 pm on Mar 7, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

IE10 doesn't recognize png for favicons

No skin off my nose. Keeping favicons with an extension all their own makes log processing a lot easier; I've had to add whole extra loops just to separate out all those apple-touch-icon permutations* from other png's.

* I think there are eight, but all I can be sure of is that if a UA requests two, it will be two I haven't got. This is the Traffic Light Principle.

drhowarddrfine

12:43 pm on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

For Apple you can narrow it down to one if you make it the bigger one. pngs are smaller than icos and you can tell IE to download ico while the other modern browsers download only the png.

lucy24

9:52 pm on Mar 8, 2013 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Well, once you get down to 318 bytes vs. 212 bytes, the server overhead alone is probably more than the filesize. It generally runs 597, 598 in my logs.

Most visitors ask for the precomposed apple-touch-icon first, and then they may or may not go on to ask for the vanilla version. So either I've got atypical visitors a possibility I can't exclude or the touch-icon documentation page is misleading. Hardly anyone asks for the 144x144, which is what they tell you to have if you don't carry all sizes, and they make it sound as if "precomposed" is second choice.