title: Preferred Logo Display Method
body: <p>When displaying a company logo I saw something new today.</p>
  
  <p>They set a height and width and overflow:hidden on the h1 tag and set a negative margin on the a tag inside of the h1 tag to keep the text from showing.</p>
  
  <p>The code looked like this</p>
  
  <pre><code>&lt;h1 class='logo'&gt;&lt;a href='/'&gt;Company Name&lt;/a&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>The css looked like this:</p>
  
  <pre><code>.logo {
    text-indent: -9999em;
    overflow: hidden;
    text-align: left;
    background-image: url(/images/logo.png);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    width: 253px;
    height: 80px;
    float: left;
    margin-left: 10px;
  }
  .logo a {
    display: block;
    width: 253px;
    height: 80px;
  }
  </code></pre>
  
  <p>I always preferred the method where you use a span inside of the a tag and set it to display:none.</p>
  
  <p>My code looks like this:</p>
  
  <pre><code>&lt;h1 class='logo'&gt;&lt;a href='/'&gt;&lt;span&gt;Company Name&lt;/span&gt;&lt;/a&gt;&lt;/h1&gt;
  </code></pre>
  
  <p>My css looks like this:</p>
  
  <pre><code>.logo {
    background: url(/images/logo.png) top left no-repeat;
    margin-left: 10px;
    a {
      display: block;
      width: 253px;
      height: 80px;
      span {
        display:none;
      }
    }
  }
  </code></pre>
  
  <p>Ignoring the fact that my nested CSS looks far cleaner, am I doing the right thing with my extra span and display:none or is there a reason for the crazy text-indent and other extra stuff the previous programmer threw into the stylesheet?</p>
  
  <p>Edit for clarity: I am not asking for a different way to display the company logo.  Using an h1 with the company name in it is an accepted standard practice for this. I guess I meant to ask what way do you prefer to display a company logo using an h1 and css? why?</p>