For the menu link text-shadow

 div.content .l-side .l-menu li a { color: #24508a; display: block; font-size: 14px; line-height: 38px; padding: 0px 8px; text-align: center; text-shadow: 0px 0px 1px #fffa68, 1px 1px 1px #fffa68, -1px -1px 1px #fffa68; }

For Ie7 I write in the style sheet

 div.content .l-side .l-menu li a { filter: progid: DXImageTransform.Microsoft.Shadow(Color=#fffa68, Direction=45, Strength=4); }

But the shadow in IE7 is not displayed. What's wrong with that?

  • one
    Standard question: are you sure that you need to support IE7. If so, are you sure that the site in IE7 should look exactly the same as in top browsers? I recently come to the opposite. Every browser possible. IE7 can not shadow, so leave it alone. Anyway, those poor fellows and a half will never know that there should be shadows. And in any case, they will not appreciate them. But with filters and other plugs, you will probably give them to an already weak machine. - Cypher
  • And if in essence, I have repeatedly come across the fact that filters and crutches similar to them from which they just do not stop working. I recommend that you create a new html document, create only one inscription in one span and bring it to mind until it works. Then take it to the state of your project and look for the cause. - Cypher
  • Or try alternatives: htc-plugs like pie.htc. It was like for the shadows. And now I came up with an option to try to make a copy of the menu text with the color of a shadow and put it under the real menu text with a pixel offset in the direction you want. - Cypher
  • I would like to make a shadow in IE7. There are no shadows in IE8 either, but if you use the code div.content .l-side .l-menu li a {-ms-filter: "progid: DXImageTransform.Microsoft.Shadow (Color = # FFFA68, Direction = 45, Strength = 1 ) "; filter: progid: DXImageTransform.Microsoft.Shadow (Color = # FFFA68, Direction = 45, Strength = 1); then the font looks disgusting. - Heidel 4:56 pm
  • Yes, with the fact that the same disgusting looks faced. So and throwing. Try poke in the direction of pie.htc or here, with the duplication of text, an example: jsfiddle.net/m32Uv - at first glance it turned out great :). - Cypher

2 answers 2

It doesn’t give me a hashcode, for some reason it’s more to edit my comments and write new comments :).

In addition to standard solutions such as filters and the like, I suggest trying to duplicate the text. Actually demo .

With the help of modernizr, you can determine if the user's browser is able to use the text-shadow property or not. As a response, you will get the textshadow or no-textshadow class in the html tag (in my premiere, I put these classes on the ul tag). And further, depending on the situation, use CSS3-shadow or this is my crutch with duplication.

The solution is not particularly tested . I suggest to vskidku :).

The boundaries of the application are not yet clear, but it is quite possible that in some situation (in the case of a single-pixel shadow, for example), the solution fits and works for sure better than filter-crutches.

HTML , of course, turns out disgusting :). But everything depends on the situation again. As an option, confuse and write a JS-ku duplicate text :).

  • I am now trying to connect PIE.htc, with rounded corners it rescued me, but for some reason it doesn't work with shadows at all. My styles are in the folder to the top / css / style.css, PIE.htc to the top / patches / PIE.htc, connect it div.content .l-side .l-menu li a {text-shadow: 0 0 1px # fffa68, 1px 1px 1px # fffa68, -1px -1px 1px # fffa68; text-shadow: 0 0 1px # fffa68, 0px 2px 1px # fffa68, 2px 0px 1px # fffa68, 0px -2px 1px # fffa68, -2px 0px 1px # fffa68, 0px 1px 1px # fffa68, 1px 0px 1px # fffa68, 0px - 1px 1px # fffa68, -1px 0px 1px # fffa68; behavior: url (../ patches / PIE.htc);} am I doing something wrong? - Heidel
  • Yes, like everything is true. If you are not sure of the paths, put it next to the CSS file and then you will definitely not get confused: behavior: url (PIE.htc). I did not fully understand when this thing works, and when it does not. Sometimes it depends on the nesting depth of the tags or the layer under what we fix. Sometimes this is a conflict with other crutches: a filter, for example. In that case, as I said, try the new html document and try to run it in it, without any extras. Or, if the cake site gives you a demo page, then take it as a basis and from it derive something close to your site. So find a conflict. - Cypher
  • putting in one folder with styles was an attempt, it’s still zero reaction. I look at the page properties through the Developer Tool in chrome, next to the behavior: url (../ patches / PIE.htc); it displays a warning icon and a tooltip for the Unknown property name. That is, he did not connect? - Heidel
  • Yes connected. Just this tool does not know the behavior properties. - Cypher

For some versions of IE, DropShadow Filter will do what you need:

http://msdn.microsoft.com/en-us/library/ms532985%28v=vs.85%29.aspx