CODEWITHSUNDEEP
htmlcss
imightbeinatree at Cloudspace
imightbeinatree at Cloudspace

Reputation: 468

Preferred Logo Display Method

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?

Upvotes: 0

Views: 1791

Answers (4)

Prashant
Prashant

Reputation: 15

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

Upvotes: 0

Casey
Casey

Reputation: 1806

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.

Upvotes: 0

Quentin
Quentin

Reputation: 943586

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.

Upvotes: 6

Kerry Jones
Kerry Jones

Reputation: 21838

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.

Upvotes: -1

Related Questions