title: How to apply css styles for IE only
body: <p>I am trying to fix issues that I am having with how my site is displayed in Internet Explorer. When searching the internet I cam across the following code to use in order to apply CSS styles for IE only. I have attached 2 images, 1 of the site in IE (tel no, menu not displayed correctly), 2nd the site in Firefox and how it should be displayed.</p>
  
  <p><a href="https://i.stack.imgur.com/NcSTC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NcSTC.jpg" alt="enter image description here"></a><a href="https://i.stack.imgur.com/Ruh84.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ruh84.jpg" alt="site in IE"></a></p>
  
  <p>I am currently going through the site to try and fix these issues but wanted some advice in order to make sure I'm applying the right code so that this displays correctly in all IE versions and doesn't mess up anything on the browsers.</p>
  
  <p>Ideally need some help to display menu and tel no correctly. Currently I have applied the following code to my stylesheet, which has added the correct spacing from the logo and menu, but menu still appears in 2 lines.</p>
  
  <p>my css:</p>
  
  <pre><code>@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  
  #blue {
      width: 31px;
      height: 52px;
      float: left;
      position: relative;
      padding: 15px 0 0 420px;
  }
  
  .brand {
      width:261px;   
    }  
  
    .header-search {
      width:679px;
    }
  
  .icemegamenu &gt; ul &gt; li  a.iceMenuTitle {
      padding: 1px 5px 0 5px;
    }
  </code></pre>
  
  <p>The site itself can be viewed at <a href="http://www.leicesterbakery.co.uk" rel="nofollow noreferrer">http://www.leicesterbakery.co.uk</a></p>
  
  <p>Would appreciate any advice to fix this.</p>
  
  <p>Thanks in advance.</p>
  
  <h2>UPDATE</h2>
  
  <p>I have managed to write the following CSS code which fixes the issues I am having for a desktop screen size. Unfortunately this breaks my code for the responsive side as with this code in the stylesheet, when I resize screen size in any browser like firefox this doesnt show up properly.</p>
  
  <p>Any ideas how i can fix this.</p>
  
  <pre><code>@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  
  .body .container {
    padding: 10px 9px;
    }
  
  .brand {
      width:221px;   
    } 
  
  .brand img {
      max-width:90%; 
      padding-top:10px;
    }
  
  .icemegamenu &gt; ul &gt; li  a.iceMenuTitle {
      padding: 1px 23px 0 23px;
    }
  </code></pre>
  
  <p>Ok I have managed to sort out the issue with the responsive code by adding (min-width:980px) to my media tag for IE. Last issue is to align the tel no on both IE and firefox to the right of the page... any advice would be greatly appreciated.</p>