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 new Situation:

Currently the site is fully XHTML-Compliant (although whether the XHTML is perfectly semantic is one best argued by theoreticians) and almost all tables are replaced by DIV and styled by CSS. The CSS completely follows the W3C spec.

Here's the XHTML code that replaces the example above:

    <div class="sidebar">
     <div class="sb_header">
      <div class="sb_title"><h4>##title##</h4></div>
     </div>
     <div class="sb_content">
      ##content##
      <div class="clsSplitter"></div>
     </div>
     <div class="sb_footer"></div>
    </div>

This is where we started before changing anything in the ASP. As you can see, all boxes used on the site contain almost the same HTML, so having introduced this simple bit of code, it was easy to replicate for all the template boxes and a good deal of the generic page layout was already converted.

Building the css for the sidebar box

An important design goal for us was that the boxes had to be scalable. This was not that easy as we first thought it would be. Whatever is in CSS?

After some searching we found an interesting article on A List Apart called Sliding Doors of CSS by Douglas Bowman. The article is actually about making tabs, which wasn't what we needed but the technique Bowman uses to make the tabs scalable was the solution we were seeking for our boxes. (We did however use Bowman's techniques for tabs when we came to convert our tabs in the MyDMXzone section.)

Hacks for Macs. To the Max.

When we implemented this we tested it with several browsers, and found the width was scalable but the height seemed to produce some problems on several browsers. We noticed that using the auto value on the height worked fine for all browsers except for IE/Mac.

Now we could include another css file for the IE Mac, but that seemed ungainly, so we resorted to a hack. For a great list of hacks visit the page http://centricle.com/ref/css/filters/. The \ hack does the trick, (the whys and wherefores are explained here).

Even after using this hack, we still had a problem using Opera on the Mac – probably because Opera masquerades as IE:

Boxes of Doom on Opera/ Mac

We used even a second hack (* html div) to cure this. Thank you, Edwardson Tan!

Here's the css for the Sidebar that we actually ended up with:

    /* Start Sidebar */
    .sidebar {
          background-image: url(images/sb_br.gif);
          background-color: #F2F5FA;
          background-repeat: no-repeat;
          background-position: right bottom;
          margin: 0px;
          margin-bottom: 8px;
          width: 170px;
    }
    .sb_header {
          background-image: url(images/sb_tr.gif);
          background-repeat: no-repeat;
          background-position: right top;
          margin: 0px;
    }
    .sb_title {
          background-image: url(images/sb_tl.gif);
          background-repeat: no-repeat;
          background-position: left top;
          margin: 0px;
          padding-top: 4px;
          padding-right: 10px;
          padding-left: 10px;
    }
    .sb_title h4 {
          font-weight : bold;
          color : #003060;
          border-bottom : 1px solid #A8B2BB;
          margin: 0px;
          padding-bottom : 2px;
    }
    .sb_content {
          border-left: 1px solid #A3B3C0;
          border-right: 1px solid #A3B3C0;
          height: auto;
          padding: 5px 10px 0px 10px;
          margin: 0px;
    }
    .sb_footer {
          border-left: 1px solid #A3B3C0;
          height: 10px;
          margin: 0px;
    }
    /* Hide for IE Mac \*/
    * html .sb_content {height: 1%;}
    /* End Hide */
    /* End Sidebar */