Good all the time of day, gentlemen (2nd time today).

The actual code is the use of the gradient .

For those who do not have IE - everything is fine, who has IE - I specifically registered the blue color. Here interests, how to make, that in IE too worked. (on css is this possible? without js / jq)

ps The tall-eyed ones will immediately say ... list:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#666666');

So, I will explain, if this property is entered, in css then in :hover it does not work.

  • one
    Do not mind it. IE users should suffer, the developer should not - neoascetic
  • one
    IE developer should burn in hell - neoascetic
  • neoascetic, I would be pleased with the answer that IE9 does not know how to do what I asked. And this is possible not on css. - sergey

5 answers 5

IE is a nightmare for any web designer =). On the topic, which code is listed below, as a rule, it successfully works on more newer versions of this browser, although, as they write articles, IE 6 should successfully cope.

filter: progid: DXImageTransform. Microsoft. gradient (startColorstr = '# 1e5799', endColorstr = '# 7db9e8', GradientType = 0);

The output of the gradient implementation in all browsers is to use a 1x32 or 32x1 image ... As for me, this is the best way out for your problem. The size of the pictures are an example.

  • slightly updated. has added. nothing works. jsfiddle.net/h7DDF/1 - sergey
  • one
    ruseller.com/lessons.php?rub=2&id=732 - this is probably an article just for you, though that hack somewhere somewhere let me down. But the article is well written, there in general is not only graduate, but in general css3 for IE - Node_pro

Pay attention to this article . Described in some detail and clearly, and most importantly - it works.

    Look here - they make a stub: Gradient Patterns .

    • Something to me did not reach the deep thought of this link. According to the link - there is a transition from one color to another. There is no gradient. - sergey

    It works like this in IE9:

     // html <table class="ttx"><tr><td> kill me... kill me please !!1 </td></tr></table> // css .ttx { font-size:42px; background-color:#99CCFF; background: -moz-linear-gradient(#333, #666); background: -ms-linear-gradient(#333, #666); background: -o-linear-gradient(#333, #666); background: -webkit-linear-gradient(#333, #666); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#333333', endColorstr='#666666'); } .ttx:hover { font-size:42px; background-color:#4488CC; background: -moz-linear-gradient(#666, #333); background: -ms-linear-gradient(#666, #333); background: -o-linear-gradient(#666, #333); background: -webkit-linear-gradient(#666, #333); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#666666', endColorstr='#333333'); }

      Why not use the picture? Yes, this is not always convenient, but in most cases it is a good fix, and most importantly, it works in all browsers that do not understand gradients, and not only in IE. Determine whether the browser is able to do gradients or not, for example, modernizer: check for css3 support . If you can, then we do the code. If not, ship the picture.

      Restrictions

      1) Guidance. If it is able to: hover load another image with a different gradient, the time it takes to load is significant. And the first time the effect does not work immediately. It is not just a picture that is being repaired, but a sprite: we cut not 32px tall, but 64px. Where the first 32px is the gradient in the normal state, and the second 32px is the gradient for guidance. In the hover state, now we are changing not the image, but the background-position . So here is the limit on height. If we do not exactly know the height (32px in the example), then the sprite does not roll. Or we are looking for a way to pull both images at once.

      2) Unknown / gone height. The picture in this case will be mated. Make a height of 33px and the repeated image will ruin everything. Output: repeat the picture only in one dimension (width), and in height press it to the bottom. The remaining pixels from the top are filled with the color of the beginning of the gradient in the picture. Restriction: with a highly variable height, say several times, it will not work, and the gradient will be only at the bottom. Yes, and it is worth thinking about whether a gradient is appropriate there at all, if it pulls it like that.

      3) JS disabled. Yes, it does not work at all. This situation is quite rare and generally hardly anything can be done in this case, except to just use color.

      Question to the author: do you know the height in your case? Or is it determined by the content?