3D Tabs with CSS2

#everything {
  padding: 0px;
  margin: 4px;
  height: 100%;
  min-height: 800px;
  width: 900px;
}

So I set this to the width of the image I created. Then each child node is set to 100% of this width, though you could also use the 'inherit' attribute.

#navTabs {
  padding: 0px 0px 0px 15px;
  margin: 0px;
  width: 100%;
  background: url("/cms/images/tabs/top.png") no-repeat top;
  height: 45px;
  vertical-align: top;
}

You'll notice this time it has a background, instead of just a line. The tab images will layer over this, the off images appearing behind, and the on images appear to meld right into it.

.tabon, .taboff {
  height: 45px;
  cursor: pointer;
  cursor: hand;
  display: inline;
  overflow: hidden;
  vertical-align: top;
}

.tabOn {
  background-image: url("/cms/images/tabs/on_m.png");
  font-weight: bold;
}

.taboff {
  background-image: url("/cms/images/tabs/off_m.png");
  color: #666666;
}

Here I've set the background image to be the middle slice. This will repeat to the width of the div.

.tabItem {
  vertical-align:top;
  height: 45px;
  display:inline;
  font-size: 11px;
  margin: 10px 0px 0px 0px;
}

#actionPanel {
  width: 100%;
  height: 70%;
  padding: 10px;
  background: url("mid.png");
}

#btm {
  height: 16px;
  background: url("bottom.png");
  }

And of course, I set the background of each of the other two sections.