title: Using 'display:block' in Internet Explorer 11
body: <p>Does anyone have some tips/tricks for dealing with IE quirks? I've got some code that works well in every other browser, but unfortunately it doesn't play nice in IE. I think I've narrowed it down to the <code>display:block</code> code that I'm using in CSS to modify the look of an ul to a navigation menu. </p>
  
  <p>Every other browser treats the <code>display:block</code> as expected: the styling extends to the entire list "block". Here's the code I'm working with:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav id="nav"&gt;
  &lt;ul id="main_ul"&gt;
      &lt;li class="main_li"&gt;    
          &lt;a class="hyper_nav" title="Home" href="index.html"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="main_li"&gt;    
          &lt;a class="active_nav" title="Link 1" href="link1.html"&gt;Link 1&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="main_li"&gt;    
          &lt;a class="hyper_nav" title="Link 2" href="link2.html"&gt;Link 2&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="main_li"&gt;    
          &lt;a class="hyper_nav" title="Link 3" href="link3.html"&gt;Link 3&lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>#main_ul {
  margin:0px;
  padding:0px;
  }
  .main_li {
      width:165px;
      background:#a3dc32;
      float:left;
      display:inline;
      text-align:center;
      text-transform:uppercase;
      font-size:20px;
      padding:7px 0px;
  }
  .main_li + .main_li {
      border-left:2px solid #ffffff;
  }
  .hyper_nav, .hyper_nav:link {
      text-decoration:none;
      color:#ffffff;
      display:block;
  }
  .hyper_nav:hover, .hyper_nav:visited, .active_nav, .active_nav:link, .active_nav:hover, .active_nav:visited {
      text-decoration:none;
      display:block;
      background:#7F52A8;
      / color:#ffffff;
      padding:10px 0px;
      margin:-10px 0px;
  }
  </code></pre>
  
  <p>And the fiddle is <a href="http://jsfiddle.net/qvfqwa3y/" rel="nofollow">here</a>.</p>
  
  <p>I do have the following code in my <code>head</code> tags, which I understand is supposed to get IE working properly with HTML5, but that's not solving anything:</p>
  
  <pre><code>    &lt;!--[if IE]&gt;
          &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  </code></pre>
  
  <p>Can anyone offer any hints or advice, please?</p>