title: Chrome Firefox pixels are off CSS
body: <p><img src="https://i.stack.imgur.com/u890R.png" alt="Pixels off"></p>
  
  <p>So I've been using Html5 and CSS3 for the past 6 months+ but have just now started running into some pixel misses between firefox(17.0.1) and chrome(23.0.1271.101). I have a CSS reset that I tried but no change. It's weird in that in chrome (pic right side) it's 2 pixels in and in firefox (pic left side) it's 2 pixels out.</p>
  
  <p>See for yourself here <a href="http://jsfiddle.net/976a3/2/" rel="nofollow noreferrer">http://jsfiddle.net/976a3/2/</a></p>
  
  <p>CSS:</p>
  
  <pre><code>body
        {
          margin: 0px 0px 0px 0px;
          background:rgba(75, 75, 75, 1);
          color:#c0c0c0;
        }
  
  #container
    {
      margin:0px auto;
      padding:0px 0px 0px 0px;
      width:300px;
      height:350px;
    }
  
  #contact_info
    {
      margin:0px 0px 0px 75px;
      padding:15px 15px 15px 15px;
      width:270px;
      height:150px;
      border:1px solid black;
      color:black;
      background:rgba(200,200,200,1);
      border-radius:20px;
      box-shadow:7px 7px 12px rgba(0,0,0,1);
    }
  .title
    {
      font-size:1.3em;
      margin:-10px 0px 0px -30px;
      padding:4px 0px 0px 10px;
      width: 235px;
      height:30px;
      color:white;
      background:rgba(22,22,22,1);
      border-top-right-radius:10px;
      border-bottom-right-radius:10px;
      text-shadow:0 0 3px rgba(192, 192, 192, 1);
      box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
      0 5px 10px rgba(0, 0, 0, 0.5) inset,
      0 4px 6px rgba(255, 255, 255, 0.2) inset,
      1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
      0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
      0pt 1px 0px rgba(0, 0, 0, 0.2);
    }
  
  .title:after
    {
      top:40px;
      left:-163px;
      position:relative;
      z-index:-2;
      content: "";
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 10px solid rgba(22, 22, 22, 1);
    }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="contact_info"&gt;
      &lt;p class="title"&gt;CONTACT INFO&lt;/p&gt;
      &lt;br /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Any fixes or ideas?</p>
  
  <p>Thanks</p>