Advantages:

• Smaller image size
• Since the tabs (active and inactive) are sprited hence just one http call would get the required images
• Add a class “tabs” to any list item and mark anchor with class “active” to show active tab

Preview:

Markup:

<ul id="p-profile-menu" class="tabs">
  <li><a href="/fe_dev.php/user/basicprofile" class=""><span>Basic</span></a></li>
  <li><a class="active" href="/fe_dev.php/user/physicalprofile"><span>Physical Details</span></a></li>
  <li><a href="/fe_dev.php/user/socialprofile"><span>Social Profile</span></a></li>
  <li><a href="/fe_dev.php/user/otherprofile"><span>Other Aspects</span></a></li>
</ul>

CSS

.tabs {
  margin-top:5px;
  margin-left:-1px;
  border-bottom:1px solid #46A7D5;
  padding-bottom:5px;
}
  .tabs li {
    display:inline;
    padding:0 1px;
  }
    .tabs li a {
      text-decoration:none;
      padding-bottom:5px;
      padding-top:3px;
      padding-left:10px;
      background:transparent url('/images/details-tabs.png') no-repeat scroll 0 -105px;
      color:#fff;
    }
    .tabs li a span {
      padding-top:3px;
      padding-right:10px;
      padding-bottom:5px;
      margin-left:2px;
      background:transparent url('/images/details-tabs.png') no-repeat scroll 100% -105px;
    }
    .tabs li a.active {
      border-bottom:1px solid #fff;
      color:#000;
      background-position:0 0px;
    }
    .tabs li a.active span {
      background-position:100% 0px;
    }

and the image used was:

Spritied Image for tabs

Disclaimer: I am sure someone somewhere must have done this before, I am not claiming any credit for this, the idea for this post is to document this solution for anyone to use later.

Obviously a comment problem for people who wants to have a coloured footer and a fancy background. So here’s the solution I applied, after looking at the solutions available.

The markup.

<div id="container">
    <div id="content">
        foo
    </div>
</div>
<div id="footer">
    content for footer
</div>

The CSS

html {
     height:100%
}
body {
     height:100%
}
#container {
     position:relative;
     min-height:100%;
     _height:100%; /* for IE6 as it doesnt understand min-height */
}
#content {
     padding-bottom:100px; /* assuming your footer height is 100px */
}

#footer {
     position: relative;
     margin-top:-100px;
     /* move the footer up negatively exactly the same height
         as the footer so that its back in the view and always
         appears to rest at the bottom
         of the page */
}

Here’s what it looks like.

A relatively straightforward solution, the only slight problem with this is that you would require to know the height of the footer well in advance which means you cant have dynamic content for the footer. If I come across a problem like that and have to figure out a solution for that, I shall post it here.

Credits: http://www.themaninblue.com/writing/perspective/2005/08/29/

Note: Following a comment on stumble upon, I just wanted to ensure that the credit link from the “Blue Man” is actually there to ensure to give the credit where its due, this blog post is just a note to self so that when i encounter a similar problem i can look back at it or anyone else who has had a similar problem can look at back at it. I am not taking any credit for this solution, infact I think this idea has a flaw in the sense that if you dont know what the height of the footer is going to be , this might not work as expected