title: :After element positioning wrong only in IE :before element is correct
body: <p>I'm working on a website for a local firm. We have a contact form that pops up over whatever page your on, accepts the information and then just allows you to stay on the current page you are viewing. Which works all well and good.</p>
  
  <p>What I cannot figure out at the moment is why the <code>:after</code> element of the styling for the form behaves weird only in internet explorer.</p>
  
  <p><img src="https://i.imgur.com/mWncYWR.png?2" alt="It looks like this in Chrome and Firefox."> The paper corners looks is rendered via CSS over the element that is the contact form.</p>
  
  <p><img src="https://i.imgur.com/95jd0Ke.png?1" alt="In IE it looks like this however."> It looks like this in IE10 and 11.</p>
  
  <p>The CSS is as follows</p>
  
  <pre><code>    #contact-form{
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  color: #0E0C1F;
  background: #F0FBFB;
     }
  
      #contact-form:after {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-bottom: 50px solid #fefefe;
  top: -55px;
  right: 666px;
  box-shadow: 0px 7px 6px -9px black;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform:rotate(-45deg); /* IE 9 */
      }
  
     #contact-form:before {
  content: "";
  display: block;
  position: absolute;
  border: 50px solid transparent;
  border-top: 50px solid #fefefe;
  top: 547px;
  left: 666px;
  box-shadow: 0px -7px 6px -9px black;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -ms-transform:rotate(-45deg); /* IE 9 */
      }
  </code></pre>
  
  <p>As pointed out in one of my comments below I'm using <a href="http://dimsemenov.com/plugins/magnific-popup/" rel="nofollow noreferrer">Magnific</a> to render the initial popup and then styling it from there. By default the popup is set to <code>position: relative;</code> and so is the container the wraps around the form.</p>
  
  <p>I modified my styled version of the <code>#contact-form</code> ID to contain <code>position: relative !important</code> just in the vent something odd was overwritting the already set <code>positions: relative;</code> Doing so did nothing to fix the form.</p>
  
  <p>The class that wraps the form reads as follows:</p>
  
  <p><code>.white-popup-block{background:#FFF;padding:20px 30px 20px 30px;text-align:left;max-width:650px;margin:40px auto;position:relative}</code></p>
  
  <p>Changing the padding on the bottom does have some effect on making the <code>:after</code> element and paper edge lineup in IE but then it just overflows the positioning of the paper corner in Firefox and Chrome.</p>