Free: Remaking DMXzone in CSS and XHTML

Read for free the trials and tribulations of our intrepid tech team as they wade through 6000 articles-worth of tag spag hell, nested table horror, and emerge victorious with a fully validating CSS and XHTML site that loads twice as fast, renders better and is more maintainable!

The ASP and JavaScript we used to convert the all our articles into xhtml and the full DMXzone.com CSS file is included for download too!

The Tabs in myDMXzone

Our tabs still don't work perfectly in IE (see the to-do list below) but the bug is particularly frustrating as it's apparently random. If they appear mangled and the page is refreshed, they display fine. If you have any ideas about how to solve the problem, please let us know!

The template for the tabs in myDMXzone is:

and we use the following CSS:

    /* Start Tabs */
    .tabs {
          background-image: url(images/1px.gif);
          background-repeat: repeat-x;
          background-position: bottom;
          float: left;
          width: 100%;
          margin: 0px;
          padding: 0px;
    }
    .tabs ul {
          margin: 0px;
          padding: 0px;
          list-style: none;
    }
    .tabs li {
          float: left;
          list-style-type: none;
          background-image: url(images/tab_r.gif);
          background-repeat: no-repeat;
          background-position: right top;
          margin: 2px 0px 0px 5px;
          padding: 0px;
          height: 30px;
          cursor: pointer;
    }
    .tabs a {
          float: left;
          display: block;
          background-image: url(images/tab_l.gif);
          background-repeat: no-repeat;
          background-position: left top;
          padding: 8px 25px 0px 10px;
          line-height: 22px;
    }
    .tabs #selected {
          background-image: url(images/tab_sel_r.gif);
          margin-top: 0px;
          height: 33px;
    }
    .tabs #selected a {
          background-image: url(images/tab_sel_l.gif);
          padding-top: 9px;
          line-height: 24px;
    }
    .tabs_holder {
          background-image: url(images/c_br.gif);
          background-color: #FFFFFF;
          background-repeat: no-repeat;
          background-position: right bottom;
          margin: 0px;
          margin-top: -8px;
          height: auto;
    }
    /* Hide for IE5/6 WIN */
    html>body .tabs_holder {margin-top: 40px;}
    /* End Hide */
    .tabs_content {
          margin: 0px;
          padding: 8px;
          height: auto;
          border-left: 1px solid #A5B2C6;
          border-right: 1px solid #A5B2C6;
    }
    /* Hide for IE Mac \*/
    * html .tabs_content {height: 1%;}
    /* End Hide */
    .tabs_footer {
          height: 10px;
          margin: 0px;
          border-left: 1px solid #A5B2C6;
    }
    /* Hide for IE Mac \*/
    * html .tabs_holder {height: 1%;}
    * html .tabs a {float: none;}
    /* End Hide */
    /* End Tabs */