title: Vertical lines on "li" items when Zoom changes
body: <p>I am testing on Chrome. My button looks good without zoom.</p>
  
  <p><img src="https://i.stack.imgur.com/aUOWy.png" alt="Without zoom"></p>
  
  <pre><code>&lt;li class="active" id="site_content"&gt;
        &lt;a href="#" id="site_content_link"&gt;Edit Content&lt;/a&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>Here is how it looks if I zoom in/out</p>
  
  <p><img src="https://i.stack.imgur.com/RMI7A.png" alt="With zoom"></p>
  
  <p>Here is the CSS:</p>
  
  <pre><code>.sub_nav ul li.active, .sub_nav ul li:hover {
  background: url("/assets/sub_nav_right.png") no-repeat scroll right 0;
  padding: 0 11px 0 0;
  
  .sub_nav ul li {
  display: block;
  float: left;
  line-height: 16px;
  margin: 0 0 0 28px;
  }
  
  .sub_nav ul li.active a, .sub_nav ul li:hover a {
  background: url("/assets/sub_nav_left.png") no-repeat;
  color: #FFFFFF;
  display: block;
  padding: 5px 0 5px 11px;
  text-shadow: none;
  }
  
  .sub_nav ul li a {
  font-family: arial;
  font-weight: bold;
  line-height: 16px;
  }
  </code></pre>
  
  <p>I created a jsfiddle here: <a href="http://jsfiddle.net/BdGA4/" rel="nofollow noreferrer">http://jsfiddle.net/BdGA4/</a></p>