title: CSS positioning differences Safari vs. Chrome
body: <p>I have different positioning results in Safari and Chrome testing.</p>
  
  <p>CSS....</p>
  
  <pre><code>.home #colophon  {
      margin-top: -150px;
      background-color: #000; 
      opacity: .6;
      height: 150px;  
  }
  .home #colophon .textwidget {
      color: #FFF;
      margin-top: -150px;
  }
  </code></pre>
  
  <p>HTML...</p>
  
  <pre><code>&lt;footer id="colophon" class="site-footer footer-columns" role="contentinfo"&gt;
  
          &lt;div class="container footer-section"&gt;
              &lt;div class="row"&gt;
                  &lt;h2 class="centered"&gt;
                      &lt;?php if (bswp_option('footer-banner-title') != '') {
                          echo bswp_option('footer-banner-title');
                          } ?&gt;
                      &lt;/h2&gt;
                  &lt;hr&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;?php dynamic_sidebar( 'footer-1' ); ?&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;?php dynamic_sidebar( 'footer-2' ); ?&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-4"&gt;
                      &lt;?php dynamic_sidebar( 'footer-3' ); ?&gt;
                  &lt;/div&gt;
          &lt;/div&gt;&lt;!-- .row --&gt;
      &lt;/div&gt;&lt;!-- .containr --&gt;
  &lt;/footer&gt;&lt;!-- #colophon --&gt;
  </code></pre>
  
  <p>Here is my page...</p>
  
  <p><a href="http://dougragerarchitect.com/" rel="nofollow">http://dougragerarchitect.com/</a></p>
  
  <p>I would like to keep my address block over the black transparent area with both browsers.</p>