Databases
StackOverflow2013
Postsdbo
POWhy does a filter gradient on a pseudo element not work in IE8?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy does a filter gradient on a pseudo element not work in IE8?
    primarykey
    data
    text
    <p>I want to create buttons like these:<br> <a href="https://i.stack.imgur.com/8LQ7d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8LQ7d.png" alt="pseudo 3d button"></a></p> <p>In modern browsers the effect is created using inset box-shadow and filters.<br> For IE8 - pseudo-elements are chosen.<br> For IE7 - I use special tags wrapped in conditional comments.</p> <p><strong>Demo:</strong> (<a href="http://jsfiddle.net/8M5Tt/68/" rel="nofollow noreferrer">http://jsfiddle.net/8M5Tt/68/</a>)</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/** * Button w/o images */ html { font-size: 62.5%; } body { font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif; } /* layout */ .btn { display: inline-block; height: 28px; border-width: 1px; border-style: solid; width: 170px; box-sizing: content-box; overflow: hidden; position: relative; z-index: 1; } .btn { margin: 15px; } .btn.btn_small { width: 130px; } /* ie7 */ .lt-ie8 .btn .before, .lt-ie8 .btn .after { position: absolute; right: -1px; left: -1px; display: block; height: 3px; } .lt-ie8 .btn .before { top: -1px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); } .lt-ie8 .btn .after { bottom: -1px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 ); } /* /ie7 */ /* ie8 */ .ie8 .btn:before, .ie8 .btn:after { content: ' '; z-index: 1; position: absolute; right: -1px; left: -1px; display: block; height: 3px; } .ie8 .btn:before { top: -1px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); } .ie8 .btn:after { bottom: -1px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 ); } /* /ie8 */ /* typo */ .btn { /* 28 / 14 = 2.57142857 */ font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif; text-transform: uppercase; } .btn:active { line-height: 2.4em; } /* color */ .btn { background-color: #00cccc; color: #fff; border-color: #00a8a8; border-radius: 3px; cursor: pointer; box-shadow: 1px 1px 4px rgba(255, 255, 255, 0.5) inset, -1px -1px 4px rgba(000, 000, 000, 0.5) inset; } .btn:hover { background-color: #00ebeb; } .btn:active { box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.5) inset, 1px 1px 4px rgba(000, 000, 000, 0.5) inset; } /* green */ .btn_green { background-color: #009900; border-color: #009600; } .btn_green:hover { background-color: #00c200; } /* red */ .btn_red { background-color: #e00000; border-color: #c13d00; } .btn_red:hover { background-color: #f00000; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --&gt; &lt;!--[if lt IE 7]&gt; &lt;div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7]&gt; &lt;div class="no-js lt-ie9 lt-ie8 ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 8]&gt; &lt;div class="no-js lt-ie9 ie8" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;div class="no-js no-ie" lang="en"&gt; &lt;!--&lt;![endif]--&gt; &lt;button class="btn btn_green btn_small "&gt; Send &lt;!--[if IE 7]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;button class="btn"&gt; Buy &lt;!--[if IE 7]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;button class="btn btn_green"&gt; Activate &lt;!--[if IE 7]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;button class="btn btn_red"&gt; Delete &lt;!--[if IE 7]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <p><strong>Main Question:</strong> Why don't filters work on pseudo elements in IE8?</p> <hr> <p><strong>Update:</strong></p> <p>I guess that filters do not work on css-generated content, despite the fact that it is not mentioned on this <a href="http://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx" rel="nofollow noreferrer">MSDN page</a>.</p> <p>I solved my problem in IE8 by applying filters to conditional elements like I do for IE7.</p> <p><strong>Final demo:</strong> (<a href="http://jsfiddle.net/matmuchrapna/8M5Tt/73/" rel="nofollow noreferrer">http://jsfiddle.net/matmuchrapna/8M5Tt/73/</a>)</p> <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false"> <div class="snippet-code snippet-currently-hidden"> <pre class="snippet-code-css lang-css prettyprint-override"><code>/** * Button w/o images */ html { font-size: 62.5%; } body { font: normal 1em/1em Arial, Tahoma, Verdana, sans-serif; } /* layout */ .btn { display: inline-block; height: 28px; border-width: 1px; border-style: solid; width: 170px; box-sizing: content-box; overflow: hidden; position: relative; z-index: 1; } .btn { margin: 15px; } .btn.btn_small { width: 130px; } /* ie78 */ .lt-ie9 .btn .before, .lt-ie9 .btn .after { position: absolute; right: -1px; left: -1px; display: block; height: 3px; } .lt-ie9 .btn .before { top: -1px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=0 ); } .lt-ie9 .btn .after { bottom: -1px; filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#80000000',GradientType=0 ); } /* /ie78 */ /* typo */ .btn { /* 28 / 14 = 2.57142857 */ font: bold 14px/2 Arial, Helvetica, Tahoma, sans-serif; text-transform: uppercase; } .btn:active { line-height: 2.4em; } /* color */ .btn { background-color: #00cccc; color: #fff; border-color: #00a8a8; border-radius: 3px; cursor: pointer; box-shadow: 1px 1px 4px rgba(255, 255, 255, 0.5) inset, -1px -1px 4px rgba(000, 000, 000, 0.5) inset; } .btn:hover { background-color: #00ebeb; } .btn:active { box-shadow: -1px -1px 4px rgba(255, 255, 255, 0.5) inset, 1px 1px 4px rgba(000, 000, 000, 0.5) inset; } /* green */ .btn_green { background-color: #009900; border-color: #009600; } .btn_green:hover { background-color: #00c200; } /* red */ .btn_red { background-color: #e00000; border-color: #c13d00; } .btn_red:hover { background-color: #f00000; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ --&gt; &lt;!--[if lt IE 7]&gt; &lt;div class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7]&gt; &lt;div class="no-js lt-ie9 lt-ie8 ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 8]&gt; &lt;div class="no-js lt-ie9 ie8" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;div class="no-js no-ie" lang="en"&gt; &lt;!--&lt;![endif]--&gt; &lt;button class="btn btn_green btn_small "&gt; Send &lt;!--[if lte IE 8]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;button class="btn"&gt; Buy &lt;!--[if lte IE 8]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;button class="btn btn_green"&gt; Activate &lt;!--[if lte IE 8]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;button class="btn btn_red"&gt; Delete &lt;!--[if lte IE 8]&gt; &lt;span class="before"&gt; &lt;/span&gt;&lt;span class="after"&gt; &lt;/span&gt; &lt;![endif]--&gt; &lt;/button&gt; &lt;/div&gt;</code></pre> </div> </div> </p> <hr> <p><strong>Update 2:</strong></p> <p>I solved my problem, but the main question is still unanswered:</p> <blockquote> <p><strong>“Why don't filters work on pseudo elements in IE8?”</strong></p> </blockquote> <p>Started a bounty.</p> <p><strong>Update 3:</strong> I created <a href="http://jsfiddle.net/matmuchrapna/QvPJv/40/" rel="nofollow noreferrer">testcase</a> only for filters(and also -ms-filter) on ie8:</p> <p><img src="https://i.stack.imgur.com/AgL1l.png" alt="enter image description here"></p> <p>But the filters still don't want to work on pseudo-elements.</p> <p><strong>Update 4:</strong> I think <a href="https://stackoverflow.com/a/10669986/1057730">Scotts answer</a> is closest to truth.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USVladimir Starkov
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POWhy does a filter gradient on a pseudo element not work in IE8?
      1. USVladimir Starkov
      1. VTBountyStart
    2. VO
      singulars
      1. POWhy does a filter gradient on a pseudo element not work in IE8?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POWhy does a filter gradient on a pseudo element not work in IE8?
      1. This table or related slice is empty.
      1. VTUpMod
    1. COIs it really worth going trhu all that trouble? IE filters are pretty buggy as well as pseudo elements. I would either use an image or just let IE do its thing. Users won't even notice.
      singulars
      1. POWhy does a filter gradient on a pseudo element not work in IE8?
      1. USelclanrs
    2. COI totally agree with you, but the problem in another thing
      singulars
      1. POWhy does a filter gradient on a pseudo element not work in IE8?
      1. USVladimir Starkov
    3. CO+1 for your good questioning style.
      singulars
      1. POWhy does a filter gradient on a pseudo element not work in IE8?
      1. USHerrSerker
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload