1

I am using IE 8 and not CSS3 and i'm wondering, I have a few 

<td>

tags and I currently the CSS is

td {
    background-color: blue;
}

Is there a way to create a gradient for the background of the td's without CSS3 for IE 8? I tried 

td { 
    background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
}

and

td {
    background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
}

but neither of them worked for me.

Now, I know that I can give the td a background image and photoshop a gradient but the thing is, my td sizes are not constant, one td might have a 150px height, one might have a 90px height, one might have a 150px width and one might have a 90px width. I need a generic code which will work for all td's regardless of their height and width.

Is there a way to make the background-image of the td to automatically be the width and height of the td even though the td's width and height of the td isn't specified and even though it just depends on how much text is inside the td?

SilentDev
  • 20,997
  • 28
  • 111
  • 214
  • possible duplicate of [Minimum CSS required for gradients IE8+](http://stackoverflow.com/questions/17201785/minimum-css-required-for-gradients-ie8) – Spudley Nov 04 '13 at 14:50
  • `-o-linear-gradient` is for older versions of Opera (before they switched to using the Blink engine). – Paul D. Waite Nov 04 '13 at 14:51

3 Answers3

5

IE 8 does support an old, non-valid, Microsoft-specific CSS gradient syntax. It doesn't offer all the features of proper CSS gradients (e.g. you can't specify stop locations), so you won't be able to exactly match the gradient you've got.

See http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx

Here's a rough approximation of your gradient:

td {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FE856B, endColorStr=#23AB11);
}
Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
  • 1
    That *is* CSS (Microsoft-specific, non-standard CSS). It's the only CSS gradient syntax that IE 8 supports. If there was another, the internet would have heard of it by now. – Paul D. Waite Nov 04 '13 at 14:54
  • On a side note, if this is particularly for browsers only until IE 9, did they get a new way to do this same thing for IE 9 and IE 10? – SilentDev Nov 04 '13 at 14:58
  • 2
    You're most welcome. IE 9 supports SVG for background images, so you can base-64-encode an SVG gradient image and use that as a background image. [This CSS gradient generator](http://www.colorzilla.com/gradient-editor/) will do that for you if you check the "IE 9 support" box. (You can also reference an external SVG image instead of including an encoded one inline, of course.) [IE 10 supports proper CSS gradients](http://docs.webplatform.org/wiki/css/functions/linear-gradient). – Paul D. Waite Nov 04 '13 at 15:00
  • Okay perfect, uhm last question. The link you gave to the IE 10 proper gradients, is that CSS3? – SilentDev Nov 04 '13 at 15:05
  • "background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%);", "background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));", "background: -ms-linear-gradient(top, #1e5799 0%,#7db9e8 100%);", and "background: linear-gradient(to bottom, #1e5799 0%,#7db9e8 100%);"... Do these only work in CSS3? – SilentDev Nov 04 '13 at 15:13
  • 1
    Depends what you mean by "in CSS3". `-ms-linear-gradient` is a non-standard, Microsoft-specific gradient syntax, supported by IE 10 - just like `-moz-linear-gradient` is a non-standard, Firefox-specific gradient syntax supported by Firefox since version 3.6. However, they're similar to `linear-gradient`, which is part of the [CSS Image Values and Replaced Content Module Level 3 standard](http://www.w3.org/TR/css3-images/), and supported by IE10, Firefox 16, and other versions of other browsers. – Paul D. Waite Nov 04 '13 at 15:19
  • Oh - note that IE9 still supports `filter`, so if you want to use an SVG background in IE 9 *and* `filter` in IE 8, you'll need to limit `filter` to IE 8 (perhaps using [conditional comments](http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/)). – Paul D. Waite Nov 05 '13 at 14:40
2

When I need to do a css gradient I usually use this site, as it provides you all the css for it to work on all browsers

Ricardo Alves
  • 642
  • 2
  • 13
  • 34
  • Hm, that's not CSS3? Also, when I got o it, it says "Looks like your browser doesn't fully support CSS gradients. You need a recent version of Firefox, Chrome or Safari to use this tool." – SilentDev Nov 04 '13 at 14:48
0

If you want to display a background texture to a td:

CSS level-2

td { 
    background-image: transparent url(a-real-image.img) repeat-x 0 0;
}

CSS level-3

td { 
    background: rgb(30,87,153); /* Old browsers */
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
}

CSS proprietary (where 'filter:' will deal with microsoft ie 6-8 [last line])

td { 
    background: rgb(30,87,153); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}

You can study over here for -ms-css : http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html

Milche Patern
  • 19,632
  • 6
  • 35
  • 52