title: IE8 and Below inline-block CSS
body: <p>So I know that IE8 and below does not like <code>inline-block</code> but I read that <code>inline</code> should result in the same behavior. So I modified copied my <code>main.css</code> to <code>main-ie8below.css</code> and changed all <code>inline-block</code> to <code>inline</code>. I use the following code to try and achieve this:</p>
  
  <pre><code>        &lt;!--[if lte IE 8]&gt;
              &lt;link rel="stylesheet" type="text/css" href="/media/css/main-ie8below.css" /&gt;
          &lt;![endif]--&gt;
          &lt;!--[if gt IE 8]&gt;
              &lt;link rel="stylesheet" type="text/css" href="/media/css/main.css" /&gt;
          &lt;![endif]--&gt;
          &lt;!--[if !IE]&gt;&lt;!--&gt;
              &lt;link rel="stylesheet" type="text/css" href="/media/css/main.css" /&gt;
           &lt;!--&lt;![endif]--&gt;
  </code></pre>
  
  <p>However, this is not working. It seems that my if statements are incorrect. Is that the case, or am I missing something else?</p>
  
  <p>Here is the HMTL in question (useless stuff removed):</p>
  
  <pre><code>    &lt;nav id="main_nav" role="navigation"&gt;&lt;!--
                              &lt;div&gt;&lt;a href=""&gt;&lt;img src=""  /&gt;&lt;/a&gt;&lt;/div&gt;&lt;!--
                      --&gt;&lt;div&gt;&lt;a href=""&gt;&lt;img src=""  /&gt;&lt;/a&gt;&lt;/div&gt;&lt;!--
                      --&gt;&lt;div&gt;&lt;a href=""&gt;&lt;img src=""  /&gt;&lt;/a&gt;&lt;/div&gt;&lt;!--
                      --&gt;&lt;div&gt;&lt;a href=""&gt;&lt;img src=""  /&gt;&lt;/a&gt;&lt;/div&gt;&lt;!--
                      --&gt;
  </code></pre>
  
  <p>Here is a fiddle, except without images:</p>
  
  <p><a href="http://jsfiddle.net/bqXsU/" rel="nofollow">http://jsfiddle.net/bqXsU/</a></p>