title: How to set up a css specifically for internet explorer and edge?
body: <p>I'm having big issues with internet explorer being a pain and glitching out on my <a href="http://www.thehealthytray.com" rel="nofollow noreferrer">website</a>, (see other question/my issue <a href="https://stackoverflow.com/questions/36369965/why-is-my-interactive-image-glitchy-on-only-internet-explorer?noredirect=1#comment60377309_36369965">here</a>). </p>
  
  <p><strong>My problem:</strong>
  I have an interactive image on this <a href="http://www.thehealthytray.com" rel="nofollow noreferrer">website</a> that acts like an image map - there are points all over the image and when the mouse hovers over one, it expands into a bigger box (this contains information. I have 6 points on the page. This works perfectly in all browsers apart from IE &amp; Edge. </p>
  
  <p><strong>What happens in IE/edge:</strong>
  The points are very glitchy and don't expand properly. Although the bottom 3 points do work fairly well for some reason. </p>
  
  <p>This is why I'm thinking of creating a separate style sheet for IE.</p>
  
  <p>I think the only way to do it is to create a completely different section of css, specifically for internet explorer. I would then like to control the css specifically for IE from my HTML, rather than having a separate stylesheet. </p>
  
  <p><strong>How would I go about doing this?</strong> </p>
  
  <p><strong>This <a href="https://stackoverflow.com/questions/36369965/why-is-my-interactive-image-glitchy-on-only-internet-explorer?noredirect=1#comment60377309_36369965">IE issue</a> has been plaguing me for ages now, if anyone knows the answer I'd be overjoyed.</strong> </p>
  
  <p>Any help will be appreciated. Cheers.</p>