Expert: Andrew Hoffman - 12/31/2007

Question
Hi
I have a page, which I want to use tabs on it. I've designed tabs with CSS, with the following style syntax:
.tab1 {
  position:absolute;
  right:210;
  top:105;
  width:100px;
  padding:4px;
  text-align:center;
  float:right;
  cursor:pointer;
  border:1px solid #B0BEC7;
  border-bottom:0;
   background: url(indentbg.gif) center center repeat-x;
}
.tab2 {
  position:absolute;
  right:310;
  top:105;
  width:100px;
  height:33px;
  color:#CC6633;
  padding:4px;
  text-align:center;
  float:right;
  border-top:1px solid #B0BEC7;
  cursor:pointer;
   background: url(indentbg2.gif) center center repeat-x;
}
.tab3 {
  position:absolute;
  right:410;
  top:105;
  width:100px;
  padding:4px;
  text-align:center;
  float:right;
  cursor:pointer;
  border:1px solid #B0BEC7;
  border-bottom:0;
   background: url(indentbg.gif) center center repeat-x;
}

As you see, all of the CSS properties are the same, except the "right" position. I think it is not a good idea to declare values again and again while they have joint. So can you please provide me a better solution?

Answer
.tab1,.tab2,.tab3 {
position:absolute;
top:105px;
width:100px;
padding:4px;
text-align:center;
float:right;
cursor:pointer;
border:1px solid #B0BEC7;
border-bottom:0;
  background: url(indentbg.gif) center center repeat-x;
}

.tab1 {
right: 210px;
}
.tab2 {
right: 310px;
}
.tab3 {
right: 410px;
}