title: New Image Replacement technique (Kellum/Zeldman) layout
body: <p>I'm developing a new responsive site ... have a look at the homepage of > <a href="http://www.living-heart.nl/txp" rel="nofollow">www.living-heart.nl/txp</a></p>
  
  <p>Everything is (almost) working according this IR technique > <a href="http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/" rel="nofollow">www.zeldman.com</a></p>
  
  <p>I've two questions:</p>
  
  <p>1) I still can see a little bit of the H1 at the right (Firefox/Mac) ... you too? It can be hidden by giving H1 more text-indent ... 101% is enough. Is that OK to do?</p>
  
  <p>2) If I disable images ... how can I get my text (H1) back?</p>
  
  <p>Thanks for helping me.</p>
  
  <pre><code>/* New Image Replacement &gt; http://wp.me/p4WtR-2xq */
  hgroup {
      padding: 1em 0 0 0;
  }
  h1 {
      font-family: lavanderia_sturdysturdy, cursive;
      color: #fff;
      font-size: 4em;
      line-height: 100%;
      background: url(../design/living-heart_logo-05.gif) no-repeat center 0;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      padding-bottom: 1.2em;
  }
  h2 {
      text-align: center;
      font-size: 2.8em;
      color: #6d8677;
      line-height: 1.2em; /* 120% van 16px */
      margin-bottom: 0;   
      font-family: 'IM Fell English', Georgia, Times, "Times New Roman", serif;
  }
  </code></pre>