sharepoint-2010 internet-explorer-11 ie8-compatibility-mode box-shadow content-editor

Why does the CSS box-shadowing work in IE11 on a Meteor app, but not on a Sharepoint CEWP?

I asked a question about getting box-shadow to work on IE here.

It turns out, though, that IE is not really the problem -- IE can produce a shadow, as seen here:

The screamshot above is from a Meteor app running on localhost; However, when I try to accomplish the shadow effect in a Sharepoint site (on a Content Editor Web Part on a page), I get no box shadow:

The CSS for the working (Meteor) is:

#imgPostTravelTop:hover,
#imgPostTravelTopRight:hover,
#imgPostTravelCenter:hover,
#imgPostTravelBottom:hover {
  z-index: 4;
    -moz-box-shadow: 0 0 7px #000;
    -webkit-box-shadow: 0 0 7px #000;
    box-shadow: 0 0 7px #000;

  border: 1px solid gold;
}

So, again, the shadowing can work fine in IE without any IE-specific directive!

The CSS for the non-working (Sharepoint Content Editor Web Part) is:

.finaff-form-help-post-travel-centerimage:hover, 
.finaff-form-help-post-travel-bottomimage:hover {
    z-index: 4;
    -moz-box-shadow: inset 0 0 7px #000;
    -webkit-box-shadow: inset 0 0 7px #000;
    box-shadow: inset 0 0 7px #000;

    border: 1px solid red;
}

Note: I swear on a stack of msdn magazines that I checked the IE version not long ago, and it was IE8, but I went to verify that and it is actually IE11! But still, even in this relatively new version of IE11, the box-shadowing is failing!

An earlier suggestion I got was to try this:

zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, 
    Color=#ff0000);

...but that doesn't do anything.

I've also tried:

-ms-filter: "progid:DXImageTransform.Microsoft.DropShadow(OffX=5, OffY=5, Color=#ff0000)";

And finally, an answer at my earlier question (linked to above) suggested:

filter:

progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=0,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=45,strength=2), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=90,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=180,strength=10), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=225,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=270,strength=5), progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=315,strength=2);

But none of this works; why does the shadow work on IE for the locally running Meteor app, but not for the Sharepoint Server-provisioned Content Editor Web Part? They are both running on the same instance of an "InPrivate" IE session.

One possibility I found in James Johnson's answer here indicates that perhaps this line in my markup:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

...is the problem. But I do not add that line explicitly, and don't know where it comes from or, if I did know where it comes from in the codebase, and I were to delete it, what havoc it might wreak elsewhere on the Sharepoint site.

For the record, the "View Source" from the working Meteor app is a profundly different, and contains no "meta" tag. It is a "different animal" altogether; here it is in its entirety, for the curious:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?abd8fa0f9109090b6dfb04ae018ba1e7a90a608e">


<script type="text/javascript">__meteor_runtime_config__ = JSON.parse(decodeURIComponent("%7B%22meteorRelease%22%3A%22METEOR%401.2.0.2%22%2C%22PUBLIC_SETTINGS%22%3A%7B%7D%2C%22ROOT_URL%22%3A%22http%3A%2F%2Flocalhost%3A3000%2F%22%2C%22ROOT_URL_PATH_PREFIX%22%3A%22%22%2C%22appId%22%3A%22wc8xy4j0rurw1r0c6ol%22%2C%22autoupdateVersion%22%3A%22fbf092224f885decf98544f617c037c838bed042%22%2C%22autoupdateVersionRefreshable%22%3A%22d906b78beb8cf4410c06763a9c8286ea8465b975%22%2C%22autoupdateVersionCordova%22%3A%22none%22%7D"));</script>

  <script type="text/javascript" src="/packages/underscore.js?fa590de5090ceb4a42555b48562fd8f8e7035758"></script>
  <script type="text/javascript" src="/packages/meteor.js?9730f4ff059088b3f7f14c0672d155218a1802d4"></script>
  <script type="text/javascript" src="/packages/autopublish.js?c5edcae57ad2cf69f735706476fb86d91c1f1b0e"></script>
  <script type="text/javascript" src="/packages/insecure.js?e7411f6cee07c76688e26c3b20767e857b42ad9f"></script>
  <script type="text/javascript" src="/packages/jquery.js?bd30605bc9f8429d01bae2d29081902d10a6c400"></script>
  <script type="text/javascript" src="/packages/linto_jquery-ui.js?6871fa19c8686253b1f7e0f12dab875122097a7d"></script>
  <script type="text/javascript" src="/packages/standard-minifiers.js?b02a7937678c6058031ee7b2f45b5a617518335d"></script>
  <script type="text/javascript" src="/packages/meteor-base.js?f0836ed3757e6217fff6e2710a1293407a6d9b09"></script>
  <script type="text/javascript" src="/packages/mobile-experience.js?674f55574f9947b91bb5f92f9ea9be098479b649"></script>
  <script type="text/javascript" src="/packages/random.js?d48c6af563fc182146464d0e3935bf1385aafe1e"></script>
  <script type="text/javascript" src="/packages/base64.js?52d94e9ee54ea51e35e9d410040454b9d9f9136a"></script>
  <script type="text/javascript" src="/packages/ejson.js?6b2a6aad82b5a8eb6d5f26975783b243b6df124a"></script>
  <script type="text/javascript" src="/packages/id-map.js?7ca7d36e6fea2952e28bf48090ce1c5c110df912"></script>
  <script type="text/javascript" src="/packages/ordered-dict.js?2628d5d93b3386b11f2d072e1d70ea9644a0652a"></script>
  <script type="text/javascript" src="/packages/tracker.js?7776276660c988c38fed448d8262b925dffb5bc3"></script>
  <script type="text/javascript" src="/packages/mongo-id.js?86be8beb10a566185e04cb56b189a091ab8773c6"></script>
  <script type="text/javascript" src="/packages/diff-sequence.js?693d4e99cb4a8884bd58c0da70e580fcf7fec2f0"></script>
  <script type="text/javascript" src="/packages/geojson-utils.js?83d13d8f6fd1847ed97e71e73e2f55dc9165dadf"></script>
  <script type="text/javascript" src="/packages/minimongo.js?cdf1a26cf7719fa9471a8017c3defd5aea812727"></script>
  <script type="text/javascript" src="/packages/check.js?fc9c23a3200accbea4c234c45664bd38c4ae2713"></script>
  <script type="text/javascript" src="/packages/retry.js?cf00021132d94e73a330886b24df2373a3b209ab"></script>
  <script type="text/javascript" src="/packages/ddp-common.js?23a845a08ff48730e7fbbbe941df509caa6b9b66"></script>
  <script type="text/javascript" src="/packages/reload.js?4afcce286a1d3526c99dff17696bd42e70150db1"></script>
  <script type="text/javascript" src="/packages/ddp-client.js?82da06d8e1ea6342d823b2c5c3be071e96108c70"></script>
  <script type="text/javascript" src="/packages/ddp.js?1c935134013739ed5ece46880dea800b6319bd67"></script>
  <script type="text/javascript" src="/packages/ddp-server.js?1057b33d71942bc01fd0167e2b2a5f49f5545d11"></script>
  <script type="text/javascript" src="/packages/mongo.js?5dcfbae63393ea63b330ea0c46d7b41eb1b4c3ae"></script>
  <script type="text/javascript" src="/packages/blaze-html-templates.js?31453f3129c01ec6fabaa5b791f6572e8c4464a2"></script>
  <script type="text/javascript" src="/packages/reactive-dict.js?e43655c138a9184c40228ef4dd2da3f65f1bd8bb"></script>
  <script type="text/javascript" src="/packages/session.js?0ae88e5e9f7b50b0047ade23a47a1a8dfa5874b9"></script>
  <script type="text/javascript" src="/packages/logging.js?79dea15e9da438bd107b9ff92162c1b189d70e4b"></script>
  <script type="text/javascript" src="/packages/deps.js?a0f1fc18309813a3aac8954f76d0c73e4c5d46f4"></script>
  <script type="text/javascript" src="/packages/htmljs.js?02fcaaa6a72c008a5f618f8ec940eac2d240fc2c"></script>
  <script type="text/javascript" src="/packages/observe-sequence.js?e0b5ec6321580efa20bf31f5a1ae4c52f05f38b5"></script>
  <script type="text/javascript" src="/packages/reactive-var.js?b77e26d789bc6e0859202f67ea0934d68346450a"></script>
  <script type="text/javascript" src="/packages/blaze.js?695c7798b7f4eebed3f8ce0cbb17c21748ff8ba8"></script>
  <script type="text/javascript" src="/packages/spacebars.js?3eafdd2d5d5d8f08431aa842df4b5e8142600b17"></script>
  <script type="text/javascript" src="/packages/webapp.js?ba2db8eb3207813c575b828e42663552e89d359e"></script>
  <script type="text/javascript" src="/packages/livedata.js?93f27626c1702ea8af804d6170ffbf8968626718"></script>
  <script type="text/javascript" src="/packages/hot-code-push.js?3916ae26c3ca4928e61dc2da7e7b3f93e4164c0c"></script>
  <script type="text/javascript" src="/packages/templating.js?142b64439619ddabba8ad16a798ed8349de73bae"></script>
  <script type="text/javascript" src="/packages/launch-screen.js?b50bb1bd905d2cc3d6182ee28c096df0cc24a725"></script>
  <script type="text/javascript" src="/packages/ui.js?6aa94fb4743be2472f799f928674607edae2afdf"></script>
  <script type="text/javascript" src="/packages/autoupdate.js?aba61f60d98ac77989b7b8984bb8495824c0dad7"></script>
  <script type="text/javascript" src="/packages/global-imports.js?a379a2c4e2479aebed57fef92a7f3df1f6843cf5"></script>
  <script type="text/javascript" src="/app/template.formhelp.js?b781feeb046b65b092be70ca04fb6d6fe3c9c114"></script>
  <script type="text/javascript" src="/app/formhelp.js?82951332599f48810cba5422fff5616aaf8a201f"></script>



<title>Travel Form Help</title>
</head>
<body>

</body>
</html>

UPDATE

I wonder if, because this seems to be a Sharepoint HTML problem, I will have to revert to trying to work around it via jQuery, such as in a "hover" event handler toggler (mouseenter, mouseleave). I was originally going down that path, but switched to the more elegant CSS-only approach. Things like IE - the bane of web developers' workhours existence) make elegance more difficult to attain.

Solution

SharePoint 2010 tells Internet Explorer to run in compatibility mode in order to retain functionality associated with its various ActiveX controls and Office extensions. Compatibility mode is essentially equivalent to IE8 in terms of HTML, CSS, and ECMAscript compliance.

If you wanted to, you could sneak <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> between the <head></head> tags in the masterpage that SharePoint uses (with no preceding elements that aren't also <meta> tags) to tell IE11 to actually behave like IE11, but that could come at a loss of SharePoint functionality.

If you have the Publishing Infrastructure site collection feature and the Publishing site feature activated on your site, it makes it easier to manipulate masterpages and page layouts. You can have multiple masterpages in your SharePoint site's masterpage gallery, giving you the ability to have some pages that render in IE8 mode for legacy functionality and some pages that render in Edge mode for modern HTML/CSS. (I would download a copy of the existing masterpage, add or update the meta header tag, and re-upload it as a new masterpage.)

While the masterpage for the site as a whole is determined by a setting in Site Settings (found at /_layouts/changesitemasterpage.aspx), you can also hardcode a masterpage reference into a page layout. Then you can create a new page using that page layout and it should render as IE11 instead of IE8.

Edit: Or yes, you could instead use jQuery to work around the problem with the CSS not being recognized. Just be aware that if you go this route, you're essentially supporting IE8, so the newest versions of jQuery probably won't work (but the venerable version 1.1 should be fine).