{"id":688,"date":"2011-12-30T11:27:39","date_gmt":"2011-12-30T21:27:39","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=688"},"modified":"2011-12-30T11:27:39","modified_gmt":"2011-12-30T21:27:39","slug":"no-shadow-in-internet-explorer","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/","title":{"rendered":"No Shadow in Internet Explorer"},"content":{"rendered":"<h3>Who Will Cry When You Die?<\/h3>\n<p>&nbsp;<\/p>\n<h2>Problem<\/h2>\n<p>I need some shadows using CSS in the non-modern browsers IE 7 and IE 8. \u00a0I found that it can be done with the filter attribute using the following code:<\/p>\n<pre>  .shadow {\n\t\/* For IE 8 *\/\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444')\";\n\t\/* For IE 5.5 - 7 *\/\n\tfilter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444');<\/pre>\n<pre>}<\/pre>\n<p>&nbsp;<\/p>\n<p>However, when I apply this to one of my existing elements, it does not show. \u00a0WHY?<\/p>\n<p>&nbsp;<\/p>\n<h2>Solution<\/h2>\n<p>If you look in the IE Developer Tools, you&#8217;ll see something funny. \u00a0You&#8217;ll probably see that if your existing element already uses a filter like maybe a gradient. \u00a0You&#8217;ll see that either the gradient or shadow filter will be overwritten. \u00a0So basically, you can&#8217;t have one filter (like shadow) \u00a0in one CSS class and another filter (like gradient) in another css class and use them on the same html element. \u00a0They will overwrite each other like any other CSS attribute. \u00a0Good job Microsoft!<\/p>\n<p>So what you have to do is just append the filters like so:<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<pre>\n\t\/* For IE 8 *\/\n\t-ms-filter: \"progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CA4BE', endColorstr='#37819B');progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444')\";\n\t\/* For IE 5.5 - 7 *\/\n\tfilter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4CA4BE', endColorstr='#37819B') progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#444444');\n<\/pre>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[2],"tags":[17,34],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.3 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>No Shadow in Internet Explorer - My Monkey Do<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"No Shadow in Internet Explorer - My Monkey Do\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/\" \/>\n<meta property=\"og:site_name\" content=\"My Monkey Do\" \/>\n<meta property=\"article:published_time\" content=\"2011-12-30T21:27:39+00:00\" \/>\n<meta name=\"author\" content=\"Webhead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webhead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/\",\"url\":\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/\",\"name\":\"No Shadow in Internet Explorer - My Monkey Do\",\"isPartOf\":{\"@id\":\"https:\/\/mymonkeydo.com\/#website\"},\"datePublished\":\"2011-12-30T21:27:39+00:00\",\"dateModified\":\"2011-12-30T21:27:39+00:00\",\"author\":{\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\"},\"breadcrumb\":{\"@id\":\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mymonkeydo.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"No Shadow in Internet Explorer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mymonkeydo.com\/#website\",\"url\":\"https:\/\/mymonkeydo.com\/\",\"name\":\"My Monkey Do\",\"description\":\"A Log of Coding Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mymonkeydo.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\",\"name\":\"Webhead\",\"url\":\"https:\/\/mymonkeydo.com\/author\/corey\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"No Shadow in Internet Explorer - My Monkey Do","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/","og_locale":"en_US","og_type":"article","og_title":"No Shadow in Internet Explorer - My Monkey Do","og_url":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/","og_site_name":"My Monkey Do","article_published_time":"2011-12-30T21:27:39+00:00","author":"Webhead","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webhead","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/","url":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/","name":"No Shadow in Internet Explorer - My Monkey Do","isPartOf":{"@id":"https:\/\/mymonkeydo.com\/#website"},"datePublished":"2011-12-30T21:27:39+00:00","dateModified":"2011-12-30T21:27:39+00:00","author":{"@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829"},"breadcrumb":{"@id":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mymonkeydo.com\/no-shadow-in-internet-explorer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mymonkeydo.com\/"},{"@type":"ListItem","position":2,"name":"No Shadow in Internet Explorer"}]},{"@type":"WebSite","@id":"https:\/\/mymonkeydo.com\/#website","url":"https:\/\/mymonkeydo.com\/","name":"My Monkey Do","description":"A Log of Coding Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mymonkeydo.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829","name":"Webhead","url":"https:\/\/mymonkeydo.com\/author\/corey\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/688"}],"collection":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/comments?post=688"}],"version-history":[{"count":0,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/688\/revisions"}],"wp:attachment":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/media?parent=688"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/categories?post=688"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/tags?post=688"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}