0

When displaying a company logo I saw something new today.

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.

The code looked like this

<h1 class='logo'><a href='/'>Company Name</a></h1>

The css looked like this:

.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;
}

I always preferred the method where you use a span inside of the a tag and set it to display:none.

My code looks like this:

<h1 class='logo'><a href='/'><span>Company Name</span></a></h1>

My css looks like this:

.logo {
  background: url(/images/logo.png) top left no-repeat;
  margin-left: 10px;
  a {
    display: block;
    width: 253px;
    height: 80px;
    span {
      display:none;
    }
  }
}

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?

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?

imightbeinatree at Cloudspace
  • 450
  • 2
  • 11

4 Answers4

6

Setting display: none will hide the content from screen readers and is thus a very bad approach.

Using the text-indent trick won't, but is still suboptimal.

The image is content and should be an <img> element.

Quentin
  • 800,325
  • 104
  • 1,079
  • 1,205
  • I am intending to hide the text content from the readers. The CSS shows a logo in its place. Both situations above do exactly what I want them to do visually, I was asking which people prefer. It is a pretty accepted practice to use the company name in an

    tag and hide the text and display the logo with css.

     – imightbeinatree at Cloudspace Jul 15 '10 at 13:35
  • 1
    Umm. Yes? My answer above stands. – Quentin Jul 15 '10 at 13:49
  • oh, i read "will hide content from screens" not "screen readers", hrm, that is an interesting point, i'm going to have to talk to some people about this, i'm giving you a point for this – imightbeinatree at Cloudspace Jul 15 '10 at 20:37
  • +1 for the image is content and should be an ``. And +1 for accessibility. – elwyn May 08 '11 at 23:37
0

You gave me an idea... 

<style type="text/css">

#logo {
    margin: 0;
}

#logo,
#logo a,
#logo:before {
    display: block;
    width: 275px;
    height: 95px;
    position: relative;
}

#logo a {
    position: absolute;
    top: 0;
    left: 0;
    line-height: -1px;
    font-size: 0;
    text-decoration: none;
    overflow: hidden;
}

#logo:before {
    content: "\0020";
    background-image: url('http://www.google.com/intl/en_ALL/images/srpr/logo1w.png');
    position: absolute;
}

</style>
<h3 id="logo"><a href="http://www.google.com">Google</a></h3>

This probably doesn't work on IE7, and Safari renders the text in the A tag as a little smudge in the top left corner. I bet it could be finessed a little more to eliminate that though. Maybe I'll be able to use this technique in the future.

Casey
  • 1,686
  • 3
  • 19
  • 35
0

i have using logo code..

.logo

{
  width: 253px;
  height: 80px;
  float: left;
  overflow: hidden;
  margin:0px;
  padding:0px;

}

.logo a
   {
   display:block;
   cursor:pointer;
   border:0px;
   font-size:1px;
   text-indent:-500px;
   text-decoraton:none;
   }

<h1 class="logo"><a href="#">company name</a>

THanks Ptiwari..

roryf
  • 27,986
  • 15
  • 77
  • 101
Prashant
  • 15
  • 2
-1

Either way you are trying to trick Google and can get penalized.

To answer your question, display:none means the text is not actually looked at on the page. The text indent means it is still there, spiders will still read the text, and therefore it can work.

Again, I consider this cheating the Search Engines and suggest against it. Use an Alt tag or find a place to put the h1 with a background image.

Kerry Jones
  • 21,388
  • 11
  • 58
  • 87
  • 1
    -1: Google actually encourages that kind of image replacement when it isn't used to boost ratings. Searching TTS text instead of an image is not tricking Google. – Andrew Moore Jul 14 '10 at 22:03
  • This: `Make pages primarily for users, not for search engines. Don't deceive your users or present different content to search engines than you display to users, which is commonly referred to as "cloaking."` is from http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35769 – Kerry Jones Jul 14 '10 at 22:18
  • Followed by: `Avoid tricks intended to improve search engine rankings. A good rule of thumb is whether you'd feel comfortable explaining what you've done to a website that competes with you. Another useful test is to ask, "Does this help my users? Would I do this if search engines didn't exist?"` – Kerry Jones Jul 14 '10 at 22:19
  • Hidden Text: http://www.google.com/support/webmasters/bin/answer.py?answer=66353 **Notice** it says `Images: Use the alt attribute to provide descriptive text. In addition, we recommend using a human-readable caption and descriptive text around the image.` – Kerry Jones Jul 14 '10 at 22:20
  • If you are placing text that represents the company name of the website you are designing, I'd say that is a pretty acceptable "first level heading" or h1 tag for pretty much the entire site. Choosing not to actually display the text but the company logo (a thing which represents the company) does not feel shady to me. I'm not trying to trick Google at all, the text they are reading is representative of the image being placed into the page with css. – imightbeinatree at Cloudspace Jul 15 '10 at 13:41
  • Did you see all the references I just gave about Google saying that? They don't know what your image represents that, you're still hiding text regardless. – Kerry Jones Jul 15 '10 at 16:15